A complete presentation of GraphQL and Relay Video : https://www.youtube.com/watch?v=Q0ccA3p5qPM&feature=youtu.be

1. GraphQL + Relay
@telligcirdec + @catelandaxel

2. Cédric GILLET
Développeur JAVA /
Architect
Axel CATELAND
Développeur Frontend /
Leadtech Front
Bientôt =>

3. GraphQL
Specification
The boring part

4. What is GraphQL ?
● An open sourced specification edited by Facebook still in draft
● Define a query language to query, fetch and mutate data from
any datasources in a declarative way

5. What is NOT GraphQL ?
● NOT a framework
● NOT specific to a language
● NOT as easy as you think

6. Keys concepts
● Hierarchical : a GraphQL query is a hierarchical set of fields
● Product-centric : the consumer decide what and how
● Strong-typing : queries are syntactically checked and provided
data are type safe
● Introspective : clients and tools can query the type system
using the GraphQL syntax
● Application-layer protocol : use it via FTP, you fools !!

7. (hidden) Keys concepts
● You gonna need some cache
● You gonna need some papers and a good knowledge of your
data
● You gonna need some red bull

8. GraphQL
Implementation
Exploitation
May the force be with you !

9. Meet SWAPI
A P I
SWAPI

10. Meet SWAPI
● The Star Wars API, or "swapi" (Swah-pee) is the
world's first quantified and programmatically-
accessible data source for all the data from the Star
Wars canon universe!
● All the data is accessible through a HTTP web API.
SWAPI

11. SWAPI Examples
GO ! GO ! GO !
SWAPI

12. GraphQL : Mapping
Consist of creating links between the backend data and graphql
fields
SWAPI

13. GraphQL : TypingSWAPI

14. GraphQL : Typing
● Consist of adding a strong type to GraphQL fields
● Exhaustive list of types
○ Scalar
■ Int / Float / String / Boolean / ID
○ Object
○ Interface
○ Union
○ Enum
○ List
○ Input Object
○ NonNull
SWAPI

15. GraphQL : Introspection
A GraphQL server supports introspection over its schema by
using GraphQL itself
SWAPI

16. GraphQL : Introspection
{
__type(name: “User”) {
name,
fields {
name,
type {
name
}
}
}
}
{
“data” : {
“__type”: {
“name” : “User”,
“fields” : [
{
“name” : “id”,
“type” : { “name” : “String” }
},
{
“name” : “name”,
“type” : { “name” : “String” }
},
{
“name” : “gender”,
“type” : { “name” : “Boolean” }
},
]
}
}
SWAPI

17. GraphQL : Arguments
● Arguments allow to pass arguments to your GraphQL
query
{
posts(category:METEOR){
title,
category,
content
}
}
SWAPI

18. GraphQL : Adding cache
Adding cache not on the GraphQL schema but on data
fetcher.
SWAPI

19. GraphQL : Several data sourcesSWAPI

20. GraphQL : Mutations
Creating a specific endpoint on the GraphQL Schema for
a client to ask for data mutation on the backend data
SWAPI

21. GraphQL : Directives and
Variables
SWAPI
● Variable ability allows to add variable to your queries
● Directive ability provides a way to describe alternate
runtime execution and type validation directly in your
queries
query myQuery($someTest: Boolean) {
experimentalField @skip(if: $someTest)
}

22. GraphQL usefull links
● http://graphql.org/
● http://facebook.github.io/graphql/
● https://sandbox.learngraphql.com/
● https://learngraphql.com/
● https://code.facebook.com

23. Relay
Best use of GraphQL for moderns webapps ? Why ? How ?

24. How relay help us ?
● To create true independents/reusables components.
● To further optimize data fetching.
● Static query check at build time (babel plugin)
● Effortless data mutation (Nope)
https://facebook.github.io/relay/
https://github.com/facebook/relay/

25. From graph data to components !
Expliquer le mapping de données sur
un composant
Relay container
Relay route

26. Relay.route
A query targeting an entry point of
our GraphQL endpoint.

27. Relay.RootContainer
Compose a Relay Route and a
Relay enhanced component.

28. Relay.container
Wrap a React
component.
Declare needed
data inside a
GraphQL
Fragment

29. Lets start to compose

30. Fragment and reusability

31. Relay compose and solve !
Under data fetching
Over data fetching
Use the best of GraphQL
tl/dr kill the need of ad’hoc endpoints

32. Under data fetching

33. Under data fetching

34. Over data fetching

35. Solved !

36. Store ?
Relay graph local cache
Reducing graph request sent to GraphQL endpoint
Reducing graph response
Pushing mutations

37. Graph Local Cache

38. Graph Local Cache

39. GraphQL Relay specification
● Unique ID for every element
● Endpoint to refetch object one by one
● Pagination through connections
○ Unique ID for a connection
○ Unique ID for each cursor in a connection
● Input and output of mutation Unique ID

40. GraphQL Relay to save the day
GraphQL Relay provide api to help fulfilling these request.
GraphQL Relay live in your GraphQL Endpoint
https://github.com/graphql/graphql-relay-js

41. Mutation - Welcome to hell
(seriously hardest part of relay)

42. Mutation
Relay push mutation to server
And ask back as a payload an intersection between what it
need and what changed on the server.
Can mutate local cache optimistically.

43. Mutation - payload intersection

44. App State
Binding with app routing
No app state stored only app data

45. Resources
https://github.com/relayjs/relay-starter-kit
https://code-cartoons.com/a-cartoon-intro-to-facebook-s-
relay-part-1-3ec1a127bca5#.y0x0eivc3

46. QUESTION(S) ?