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 full-size slide

  2. Sibelius Seraphini
    @sibelius @sseraphini
    2

    View full-size slide

  3. Data Fetching
    Which problem does it solve?
    3

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  7. - 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 full-size slide

  8. - 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 full-size slide

  9. Relay Modern
    Concepts
    13

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

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

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. Is Relay Modern the Future?
    Sibelius

    View full-size slide