Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Sibelius Seraphini - Relay Modern

762 visualizaciones

Publicado el

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

Publicado en: Software
  • Inicia sesión para ver los comentarios

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

×