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) ?