GraphQL + relay
-
Upload
cedric-gillet -
Category
Software
-
view
651 -
download
1
Transcript of GraphQL + relay
GraphQL + Relay
@telligcirdec + @catelandaxel
Cédric GILLET
Développeur JAVA / Architect
Axel CATELAND
Développeur Frontend / Leadtech Front
Bientôt =>
GraphQL Specification
The boring part
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
What is NOT GraphQL ?
● NOT a framework
● NOT specific to a language
● NOT as easy as you think
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 !!
(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
GraphQL ImplementationExploitation
May the force be with you !
Meet SWAPI
A P I
SWAPI
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
SWAPI Examples
GO ! GO ! GO !
SWAPI
GraphQL : MappingConsist of creating links between the backend data and graphql fields
SWAPI
GraphQL : TypingSWAPI
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
GraphQL : IntrospectionA GraphQL server supports introspection over its schema by using GraphQL itself
SWAPI
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
GraphQL : Arguments ● Arguments allow to pass arguments to your GraphQL
query
{ posts(category:METEOR){ title, category, content }}
SWAPI
GraphQL : Adding cacheAdding cache not on the GraphQL schema but on data fetcher.
SWAPI
GraphQL : Several data sourcesSWAPI
GraphQL : MutationsCreating a specific endpoint on the GraphQL Schema for a client to ask for data mutation on the backend data
SWAPI
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)
}
GraphQL usefull links
● http://graphql.org/● http://facebook.github.io/graphql/● https://sandbox.learngraphql.com/● https://learngraphql.com/● https://code.facebook.com
Relay
Best use of GraphQL for moderns webapps ? Why ? How ?
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/
From graph data to components !
Expliquer le mapping de données sur
un composant
Relay container
Relay route
Relay.route
A query targeting an entry point of our GraphQL endpoint.
Relay.RootContainer
Compose a Relay Route and a Relay enhanced component.
Relay.container
Wrap a React component.
Declare needed data inside a GraphQL Fragment
Lets start to compose
Fragment and reusability
Relay compose and solve !
Under data fetching
Over data fetching
Use the best of GraphQL
tl/dr kill the need of ad’hoc endpoints
Under data fetching
Under data fetching
Over data fetching
Solved !
Store ?
Relay graph local cache
Reducing graph request sent to GraphQL endpoint
Reducing graph response
Pushing mutations
Graph Local Cache
Graph Local Cache
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
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
Mutation - Welcome to hell
(seriously hardest part of relay)
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.
Mutation - payload intersection
App State
Binding with app routing
No app state stored only app data
Resources
https://github.com/relayjs/relay-starter-kit
https://code-cartoons.com/a-cartoon-intro-to-facebook-s-relay-part-1-3ec1a127bca5#.y0x0eivc3
QUESTION(S) ?