Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactConfBR - Is Relay Modern the Future?

ReactConfBR - Is Relay Modern the Future?

React Conf BR talk about Relay Modern Declarative Data Fetching framework

Sibelius Seraphini

October 07, 2017
Tweet

More Decks by Sibelius Seraphini

Other Decks in Programming

Transcript

  1. Relay Modern
    Declarative Data Fetching
    Sibelius Seraphini

    View Slide

  2. Sibelius Seraphini
    @sibelius @sseraphini
    2

    View Slide

  3. Data Fetching
    Which problem does it solve?
    3

    View Slide

  4. - Duplicate fetch logic
    - Caching is hard
    - Data fetching is hard to optimize
    - Hard to handle different endpoints
    - Pagination can be tricky
    - Underfetching
    - Overfetching
    Data Fetching is tricky
    4

    View Slide

  5. 5

    View Slide

  6. 6

    View Slide

  7. 7

    View Slide

  8. 8

    View Slide

  9. - Declarative (declare data your
    component needs)
    - Colocating (component + data
    requirement)
    - Performance
    - Common patterns (e.g., pagination)
    Value proposition
    9

    View Slide

  10. - Subscriptions
    - Mutations
    - Data consistency
    - Optimistic updates
    - Error handling
    Value Proposition
    10

    View Slide

  11. - Static queries
    - Ahead of time code generation
    - Compat mode
    - Simpler and more predictable API
    - More light-weight (20% less)
    - Faster performance
    - Persisted Queries
    - Garbage Collection
    What's new in Relay Modern
    11

    View Slide

  12. - GraphQL Subscriptions & Live
    Queries
    - Injectable Custom Field Handlers
    - Simpler Mutation API
    - Client Schema Extensions
    - Flowtype Generation
    - Extensible Core
    - Closer API to GraphQL Spec
    - no need for Viewer (Relay Classic)
    What's new in Relay Modern
    12

    View Slide

  13. Relay Modern
    Concepts
    13

    View Slide

  14. const UserRow = ({ user }) => (

    {user.name}
    {user.email}

    );
    const UserRowFragmentContainer = createFragmentContainer(UserRow, {
    user: graphql`
    fragment UserRow_user on User {
    name
    email
    }
    `,
    });
    Data Components (aka containers)
    14

    View Slide

  15. environment={environment}
    query={graphql`
    query UserQuery($id: ID!) {
    user(id: $id) {
    ...UserRow_user
    }
    }
    `}
    variables={{id: '110798995619330'}}
    render={({error, props}) => {
    if (error) {
    return {error.message};
    }
    if (props) {
    return
    }
    return Loading;
    }}
    />
    QueryRenderer (root of Relay tree)
    15

    View Slide

  16. RefetchContainer
    export default createRefetchContainer(FeedStories, {
    feed: graphql`
    fragment FeedStories_feed on Feed
    @argumentDefinitions(
    count: {type: "Int", defaultValue: 10}
    ) {
    stories(first: $count) {
    edges {
    node {
    id
    ...Story_story
    }
    }
    }
    }
    `
    },
    graphql`
    query FeedStoriesRefetchQuery($count: Int) {
    feed {
    ...FeedStories_feed @arguments(count: $count)
    }
    }
    `,
    ); 16

    View Slide

  17. RefetchContainer - refetch
    _loadMore() {
    // Increments the number of stories being rendered by 10.
    const refetchVariables = fragmentVariables => ({
    count: fragmentVariables.count + 10,
    });
    this.props.relay.refetch(refetchVariables, null);
    }
    17

    View Slide

  18. Mutations
    - A Write then Read
    const mutation = graphql`
    mutation AddShipMutation($input: AddShipData!) {
    addShip(input: $input) {
    faction {
    ships {
    id
    }
    }
    newShipEdge
    }
    }
    `;
    18

    View Slide

  19. Mutations - Update Store
    const configs = [{
    type: 'RANGE_ADD',
    parentID: 'shipId',
    connectionInfo: [{
    key: 'AddShip_ships',
    rangeBehavior: 'append',
    }],
    edgeName: 'newShipEdge',
    }];
    - RANGE_ADD - add node to edge
    - RANGE_DELETE - remove node from edge
    - NODE_DELETE - remove node from store
    - updater - imperative API
    19

    View Slide

  20. Subscriptions
    const subscription = graphql`
    subscription MarkReadNotificationSubscription(
    $storyID: ID!
    ) {
    markReadNotification(storyID: $storyID) {
    notification {
    seenState
    }
    }
    }
    `;
    20

    View Slide

  21. Debugging
    21

    View Slide

  22. Resources
    22
    - https://github.com/sibelius/ReactNavigationRel
    ayModern
    - https://reactjs.org/blog/2015/02/20/introducing-
    relay-and-graphql.html
    - https://facebook.github.io/relay/
    - https://code-cartoons.com/a-cartoon-intro-to-fa
    cebook-s-relay-part-1-3ec1a127bca5

    View Slide

  23. I didn't mention
    23
    - GraphQL/Relay compiler
    - Babel plugin Relay
    - Live Queries
    - PaginationContainer
    - Mutation Updater Imperative API
    - Relay Directives
    - Relay Network Layer
    - Relay Environment
    - Cache

    View Slide

  24. Is Relay Modern the Future?
    Sibelius

    View Slide