View
110
Download
1
Category
Preview:
Citation preview
GraphQL & Relay 入 門
chentsulin
chentsulin
C. T. LinActive JavaScript Open Source Developer
System Engineer Lead@Yoctol
Repos- electron-react-boilerplate- awesome-graphql- koa-graphql- sweetalert-react
Translations- redux- graphql- relay
PR Welcome !
進 入 正 題
今 天 的 範 例 放 在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 )
GraphQL
Why?RESTfu l d idn’ t sca le
Problems- A lot of Endpoints- Breakings cause client/server Mismatch- Overfetching and Underfetching- Nested Resources- Lack of Type System
叫作 QL最強大的當然是它的 Query
{ v iewer { id tota lCount } }
ResponseRequest
{ "data" : { "v iewer" : { " id" : "VXNlc jptZQ==", " tota lCount”: 2 } } }
順便介紹一下重要的 GraphiQL
還有重要的 Fragment
{ 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 " } } ] } } } }
再來就是用來處理 side effects 的
Mutation
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{ "data" : { "addTodo" : { " todoEdge" : { "node" : { " i d " : "VG9kbzoz" , " t ex t " : " tes t " , " comple te" : fa l se } } } }}
{ " 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 " }}
Type System
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 , fi 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}
Schema
schema { query: Root mutation: Mutation}
Relay
Advantages- Declarative Data Fetching- Co-locate your Data Requirement- Caching- Data Consistency- Optimistice Updates- …
GraphQL Relay Specificat ion
Relay 對 GraphQL Server有三個要求
1. A mechanism for refetching an object2. A description of how to page through
connections3. Structure around mutations to make them
predictable
參閱 https://chentsulin.github.io/relay/docs/graphql-relay-specification.html#content
這些會藉由 graphql-relay來達成
Object Identification
import { nodeDefinitions,} from 'graphql-relay' ;
const { nodeInterface, nodeField, } = nodeDefinitions( globalIdToResource, objToGraphQLType,);
Node Definitions
const GraphQLTodo = new GraphQLObjec tType ({ name: ' Todo ' , fie lds : { i d : g loba l IdF ie ld ( ' Todo ' ) , t ex t : { t ype : GraphQLSt r ing , reso lve : ob j => ob j . tex t , } , comp le te : { t ype : GraphQLBoo lean , reso lve : ob j => ob j . comple te , } , } , i n te r faces : [ node In ter fac e ] ,} ) ;
Implement Node Interface
const Root = new GraphQLObjectType({ name: 'Root', fields: { node: nodeField, },});
Export to Root Query
Connection
import { connectionDefinit ions,} from 'graphql-relay’;
const { connectionType: TodosConnection, edgeType: GraphQLTodoEdge,} = connectionDefinit ions({ name: 'Todo', nodeType: GraphQLTodo,});
Connection Definitions
Mutation
const GraphQLAddTodoMutat ion = mutat ionWithCl ientMutat ion Id ({ name: 'AddTodo ' , inputF ie lds : { text : { type: new GraphQLNonNul l (GraphQLStr ing) } , } , mutateAndGetPay load: ({ text }) => { const loca lTodoId = addTodo(text) ; return { loca lTodoId } ; } , / / …}) ;
Using mutationWithClientMutationId
/ / … 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 Fo 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 LU s e r , r e s o l v e : ( ) = > g e t V i e w e r ( ) , } , } ,
Using mutationWithClientMutationId
Walk Through Simplified Todo
1. Setup (packages, babel-plugin)2. GraphQL server3. GraphQL schema & database4. Frontend entry5. Routes6. Components7. Fragement Composition8. Mutations
打個廣告…
最近開了GraphQL Taiwan
fb 社團https
://www.facebook.com/groups/1110869155655533
/
The EndThanks for L isten ing
Recommended