how master graphql by francois de campredon

lamifasisiTheFamilyTheFamilylamifasisi

DISAGREE ON TWITTERDISAGREE ON TWITTER

#CODITO

FRANÇOIS DE CAMPREDON

GraphQL

@fdecampredon20/10/2016

Agenda

• REST Problems

• GraphQL

• Relay

• Apollo

REST

2000: Static WebWeb Browser

Web Server

Data Service

HTML

2005: AJAXWeb Browser

Web Server

Data Service

JavaScript Client

HTML API

API

• SOAP

• XML-RPC / JSON-RPC

• AMF / RemoteObjects

• Etc …

REST Advantages

• Stateless

• Cacheable

• Uniform interface

• Scalability

2010: Mobile AppWeb Browser

Web Server

Data Service

JavaScript Client

HTML API

Mobile APP

/conversations /users/3

/messages/222

/conversations_for_listview

• /conversations

• /conversations_for_listview

• /conversations_special

• ….

/users/3

/v1/users/3

/v1/users/3

/v2/users/3

• /v1/conversations

• /v1/conversations_for_listview

• /v1/conversations_special

• /v2/conversations

• /v2/conversations_for_listview

• /v2/conversations_special

• ….

REST problems

• Multiple round trip

• Versionning

• Endpoints multiplication

• No type system

Facebook Netflix

GraphQL Falcor

GraphQL

What is GraphQL

• A query language for API

• ≠ Database query language

• Strongly Typed

• Hierarchical

How does it works ?

• Define the types exposed by the service

• Define how the fields of those types are resolved

• Query

Basic Query

Nesting

Arguments

Alias

Fragments

Variables

Mutations

Types

Query Response

No versioning !

Advantages

• Complex Query with only one Request

• Versioning Free

• Strongly Typed

• Introspection

Examples

Relay

Relay• Data fetching framework for React

• Features :

• Declarative

• Query Colocation

• Automatic mutations management

Container

Container composition

Variables

Mutations

• Map a GraphQL mutation

• Declare how this mutation affects the Data State

• Declare Optimistic Response

• Better described by Example

Examples

Relay Advantages

• Query Colocation = Isolation

• Declarative

• Productive

Relay Drawbacks

• Assumptions on how the GraphQL schema is structured

• Black Box

• Complex

• Does not suit all the applications

Apollo• A stack based on GraphQL

• Apollo Server: HTTP JavaScript GraphQL server

• Apollo Client: fully-featured caching GraphQL client, with binding for React, Angular, IOS and android

• graphql-tools: Alternative approach to constructing GraphQL schema.

• And a lot more …

Apollo client

Apollo Client vs Relay

• No build step

• Not assumptions on Schema• http://www.codazen.com/choosing-graphql-client-apollo-vs-relay/

Queries

Mutations

Optimistic Updates

Apollo Advantages

• Flexibility

• Simplicity

• Evolving Fast

• Integrate well with third party library

Apollo Drawbacks• No Container composition (not entirely true)

• No errors at build time

• Less « magic »

• Perhaps less performant ?

• Not Facebook ? :p

François de Campredon

@fdecampredonhttps://github.com/fdecampredon/

Thanks !

GraphQL: http://graphql.org/Relay: https://facebook.github.io/relay/Apollo: http://dev.apollodata.com/

SEE YOU SOON!SEE YOU SOON!

THEFAMILY.CO