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
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
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
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)
}
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
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
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.