ReactConfBR - Is Relay Modern the Future?

React Conf BR talk about Relay Modern Declarative Data Fetching framework

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. View Slide

6. View Slide

7. View Slide

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