Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sibelius Seraphini - Relay Modern

741 views

Published on

Apresentado na React Conf Brasil, em São Paulo, 7 de Outubro de 2017 #reactconfbr

I'm the creator of React Brasil. I'm the software technical lead on Entria. Living on the bleeding edge (React Native, Relay, GraphQL, Redux, Redux-Saga, Koa), I love to contribute to open source projects.

https://github.com/sibelius
@sseraphini

- Patrocínio: Pipefy, Globo.com, Meteor, Apollo, Taller, Fullcircle, Quanto, Udacity, Cubos, Segware, Entria
- Apoio: Concrete, Rung, LuizaLabs, Movile, Rivendel, GreenMile, STQ, Hi Platform
- Promoção: InfoQ, DevNaEstrada, CodamosClub, JS Ladies, NodeBR, Training Center, BrazilJS, Tableless, GeekHunter
- Afterparty: An English Thing

Published in: Software
  • Login to see the comments

Sibelius Seraphini - Relay Modern

  1. 1. Relay Modern Declarative Data Fetching Sibelius Seraphini
  2. 2. Sibelius Seraphini @sibelius @sseraphini 2
  3. 3. Data Fetching Which problem does it solve? 3
  4. 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. 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. - Declarative (declare data your component needs) - Colocating (component + data requirement) - Performance - Common patterns (e.g., pagination) Value proposition 9
  10. 10. - Subscriptions - Mutations - Data consistency - Optimistic updates - Error handling Value Proposition 10
  11. 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. 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. 13. Relay Modern Concepts 13
  14. 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. 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. 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. 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. 18. Mutations - A Write then Read const mutation = graphql` mutation AddShipMutation($input: AddShipData!) { addShip(input: $input) { faction { ships { id } } newShipEdge } } `; 18
  19. 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. 20. Subscriptions const subscription = graphql` subscription MarkReadNotificationSubscription( $storyID: ID! ) { markReadNotification(storyID: $storyID) { notification { seenState } } } `; 20
  21. 21. Debugging 21
  22. 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. 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. 24. Is Relay Modern the Future? Sibelius

×