This document introduces GraphQL and Relay. It discusses how GraphQL addresses issues with REST APIs like overfetching and nested resources. It provides examples of GraphQL queries, mutations, and connections. It also explains key aspects of Relay like object identification, connections, and mutations with client mutation IDs. Finally, it outlines setting up a simplified todo app with GraphQL and Relay.

1. GraphQL & Relay 入門

2. chentsulin
chentsulin
C. T. Lin
Active JavaScript Open Source Developer
System Engineer Lead@Yoctol

3. Repos
- electron-react-boilerplate
- awesome-graphql
- koa-graphql
- sweetalert-react
Translations
- redux
- graphql
- relay
PR Welcome !

4. 進入正題

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. GraphQL

7. Why?
RESTful didn’t scale

8. Problems
- A lot of Endpoints
- Breakings cause client/server Mismatch
- Overfetching and Underfetching
- Nested Resources
- Lack of Type System

9. 叫作 QL
最強大的當然是它的
Query

10. {
view er {
id
t ot alC ount
}
}
ResponseRequest
{
"dat a ": {
"view er": {
"id": " VXN lc jpt ZQ = = ",
"t ot alC ount ” : 2
}
}
}

11. 順便介紹一下
重要的
GraphiQL

12. 還有重要的
Fragment

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. 再來就是用來處理
side effects 的
Mutation

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. Type System

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. Schema

19. schema {
query: Root
mutation: Mutation
}

20. Relay

21. Advantages
- Declarative Data Fetching
- Co-locate your Data Requirement
- Caching
- Data Consistency
- Optimistice Updates
- …

22. GraphQL Relay
Specification

23. Relay 對
GraphQL Server
有三個要求

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. 這些會藉由
graphql-relay
來達成

26. Object Identification

27. import {
nodeDefinitions,
} from 'graphql-relay';
const {
nodeInterface,
nodeField,
} = nodeDefinitions(
globalIdToResource,
objToGraphQLType,
);
Node Definitions

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. const Root = new GraphQLObjectType({
name: 'Root',
fields: {
node: nodeField,
},
});
Export to Root Query

30. Connection

31. import {
connectionDefinitions,
} from 'graphql-relay’;
const {
connectionType: TodosConnection,
edgeType: GraphQLTodoEdge,
} = connectionDefinitions({
name: 'Todo',
nodeType: GraphQLTodo,
});
Connection Definitions

32. Mutation

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. / / …
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. Walk Through
Simplified Todo

37. 1. Setup (packages, babel-plugin)
2. GraphQL server
3. GraphQL schema & database
4. Frontend entry
5. Routes
6. Components
7. Fragement Composition
8. Mutations

38. 打個廣告…

39. 最近開了
GraphQL Taiwan
fb 社團
https://www.facebook.com/groups/1110869155655
533/

40. The En
Thanks for Listening