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.

GraphQL Relay Introduction

326 views

Published on

GraphQL Relay Introduction@ReactJS 讀書會

Published in: Engineering
  • Be the first to comment

GraphQL Relay Introduction

  1. 1. GraphQL & Relay 入門
  2. 2. chentsulin chentsulin C. T. Lin Active JavaScript Open Source Developer System Engineer Lead@Yoctol
  3. 3. Repos - electron-react-boilerplate - awesome-graphql - koa-graphql - sweetalert-react Translations - redux - graphql - relay PR Welcome !
  4. 4. 進入正題
  5. 5. 今天的範例放在 k o a - g r a p h q l - r e l a y - e x a m p l e ( h t t p s : / / g o o . g l / g t 3 i A h )
  6. 6. GraphQL
  7. 7. Why? RESTful didn’t scale
  8. 8. Problems - A lot of Endpoints - Breakings cause client/server Mismatch - Overfetching and Underfetching - Nested Resources - Lack of Type System
  9. 9. 叫作 QL 最強大的當然是它的 Query
  10. 10. { view er { id t ot alC ount } } ResponseRequest { "dat a ": { "view er": { "id": " VXN lc jpt ZQ = = ", "t ot alC ount ” : 2 } } }
  11. 11. 順便介紹一下 重要的 GraphiQL
  12. 12. 還有重要的 Fragment
  13. 13. { v i e w e r { i d t o t a l C o u n t . . . t o d o I n f o } } f r a g m e n t t o d o I n f o o n U s e r { t o d o s { e d g e s { n o d e { i d } } } } ResponseRequest { " d a t a " : { " v i e w e r " : { " i d " : " V X N l c j p t Z Q = = " , " t o t a l C o u n t " : 2 , " t o d o s " : { " e d g e s " : [ { " n o d e " : { " i d " : " V G 9 k b z o w " } } , { " n o d e " : { " i d " : " V G 9 k b z o x " } } ] } } } }
  14. 14. 再來就是用來處理 side effects 的 Mutation
  15. 15. m u t a t i o n A d d To d o ( $ i n p u t : A d d To d o I n p u t ! ) { a d d To d o ( i n p u t : $ i n p u t ) { t o d o E d g e { n o d e { i d t e x t c o m p l e t e } } } } ResponseRequest { " d a t a " : { " a d d To d o " : { " t o d o E d g e " : { " n o d e " : { " i d " : " V G 9 k b z o z " , " t e x t " : " t e s t " , " c o m p l e t e " : f a l s e } } } } } { " i n p u t " : { " t e x t " : " t e s t " , " c l i e n t M u t a t i o n I d " : " 0 " } }
  16. 16. Type System
  17. 17. t y p e To d o i m p l e m e n t s N o d e { # T h e I D o f a n o b j e c t i d : I D ! t e x t : S t r i n g c o m p l e t e : B o o l e a n } t y p e U s e r i m p l e m e n t s N o d e { # T h e I D o f a n o b j e c t i d : I D ! t o d o s ( a f t e r : S t r i n g , f i r s t : I n t , b e f o r e : S t r i n g , l a s t : I n t ) : To d o C o n n e c t i o n t o t a l C o u n t : I n t c o m p l e t e d C o u n t : I n t }
  18. 18. Schema
  19. 19. schema { query: Root mutation: Mutation }
  20. 20. Relay
  21. 21. Advantages - Declarative Data Fetching - Co-locate your Data Requirement - Caching - Data Consistency - Optimistice Updates - …
  22. 22. GraphQL Relay Specification
  23. 23. Relay 對 GraphQL Server 有三個要求
  24. 24. 1. A mechanism for refetching an object 2. A description of how to page through connections 3. Structure around mutations to make them predictable 參閱 https://chentsulin.github.io/relay/docs/graphql- relay-specification.html#content
  25. 25. 這些會藉由 graphql-relay 來達成
  26. 26. Object Identification
  27. 27. import { nodeDefinitions, } from 'graphql-relay'; const { nodeInterface, nodeField, } = nodeDefinitions( globalIdToResource, objToGraphQLType, ); Node Definitions
  28. 28. c o n s t G r a p h Q LTo d o = n e w G r a p h Q L O b j e c t Ty p e ( { n a m e : ' To d o ' , f i e l d s : { i d : g l o b a l I d F i e l d ( ' To d o ' ) , t e x t : { t y p e : G r a p h Q L S t r i n g , r e s o l ve : o b j = > o b j . t e x t , } , c o m p l e t e : { t y p e : G r a p h Q L B o o l e a n , r e s o l ve : o b j = > o b j . c o m p l e t e , } , } , i n t e r f a c e s : [ n o d e I n t e r f a c e ] , } ) ; Implement Node Interface
  29. 29. const Root = new GraphQLObjectType({ name: 'Root', fields: { node: nodeField, }, }); Export to Root Query
  30. 30. Connection
  31. 31. import { connectionDefinitions, } from 'graphql-relay’; const { connectionType: TodosConnection, edgeType: GraphQLTodoEdge, } = connectionDefinitions({ name: 'Todo', nodeType: GraphQLTodo, }); Connection Definitions
  32. 32. Mutation
  33. 33. const GraphQLA ddTodoMutation = mut at ionWithC lient MutationId ({ name: ' A ddTodo ' , input Fields : { t ext : { t ype: new GraphQLN onN ull ( GraphQLSt ring ) }, }, mut at eA ndGet Payload : ( { t e x t }) = > { const localTodoId = addTodo ( t ext) ; ret urn { localTodoId }; }, // … }) ; Using mutationWithClientMutationId
  34. 34. / / … o u t p u t F i e l d s : { t o d o E d g e : { t y p e : G r a p h Q LTo d o E d g e , r e s o l v e : ( { l o c a l To d o I d } ) = > { c o n s t t o d o = g e t To d o ( l o c a l To d o I d ) ; r e t u r n { c u r s o r : c u r s o r F o r O b j e c t I n C o n n e c t i o n ( g e t To d o s ( ) , t o d o ) , n o d e : t o d o , } ; } , } , v i e w e r : { t y p e : G r a p h Q L U s e r, r e s o l v e : ( ) = > g e t V i e w e r ( ) , } , } , Using mutationWithClientMutationId
  35. 35. Walk Through Simplified Todo
  36. 36. 1. Setup (packages, babel-plugin) 2. GraphQL server 3. GraphQL schema & database 4. Frontend entry 5. Routes 6. Components 7. Fragement Composition 8. Mutations
  37. 37. 打個廣告…
  38. 38. 最近開了 GraphQL Taiwan fb 社團 https://www.facebook.com/groups/1110869155655 533/
  39. 39. The En Thanks for Listening

×