graphql relay introduction

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