ReactConfBR - Is Relay Modern the Future?

ReactConfBR - Is Relay Modern the Future?

React Conf BR talk about Relay Modern Declarative Data Fetching framework

4f821cc50056b266277a2156593eb96c?s=128

Sibelius Seraphini

October 07, 2017
Tweet

Transcript

  1. Relay Modern Declarative Data Fetching Sibelius Seraphini

  2. Sibelius Seraphini @sibelius @sseraphini 2

  3. Data Fetching Which problem does it solve? 3

  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
  5. 5

  6. 6

  7. 7

  8. 8

  9. - Declarative (declare data your component needs) - Colocating (component

    + data requirement) - Performance - Common patterns (e.g., pagination) Value proposition 9
  10. - Subscriptions - Mutations - Data consistency - Optimistic updates

    - Error handling Value Proposition 10
  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
  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
  13. Relay Modern Concepts 13

  14. const UserRow = ({ user }) => ( <View> <Text>{user.name}</Text>

    <Text>{user.email}</Text> </View> ); const UserRowFragmentContainer = createFragmentContainer(UserRow, { user: graphql` fragment UserRow_user on User { name email } `, }); Data Components (aka containers) 14
  15. <QueryRenderer environment={environment} query={graphql` query UserQuery($id: ID!) { user(id: $id) {

    ...UserRow_user } } `} variables={{id: '110798995619330'}} render={({error, props}) => { if (error) { return <View>{error.message}</View>; } if (props) { return <UserFragmentContainer {...props} /> } return <View>Loading</View>; }} /> QueryRenderer (root of Relay tree) 15
  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
  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
  18. Mutations - A Write then Read const mutation = graphql`

    mutation AddShipMutation($input: AddShipData!) { addShip(input: $input) { faction { ships { id } } newShipEdge } } `; 18
  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
  20. Subscriptions const subscription = graphql` subscription MarkReadNotificationSubscription( $storyID: ID! )

    { markReadNotification(storyID: $storyID) { notification { seenState } } } `; 20
  21. Debugging 21

  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
  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
  24. Is Relay Modern the Future? Sibelius