how master graphql by francois de campredon
TRANSCRIPT
![Page 1: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/1.jpg)
![Page 2: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/2.jpg)
lamifasisiTheFamilyTheFamilylamifasisi
![Page 3: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/3.jpg)
DISAGREE ON TWITTERDISAGREE ON TWITTER
#CODITO
![Page 4: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/4.jpg)
FRANÇOIS DE CAMPREDON
![Page 5: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/5.jpg)
GraphQL
@fdecampredon20/10/2016
![Page 6: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/6.jpg)
Agenda
• REST Problems
• GraphQL
• Relay
• Apollo
![Page 7: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/7.jpg)
REST
![Page 8: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/8.jpg)
2000: Static WebWeb Browser
Web Server
Data Service
HTML
![Page 9: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/9.jpg)
2005: AJAXWeb Browser
Web Server
Data Service
JavaScript Client
HTML API
![Page 10: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/10.jpg)
API
• SOAP
• XML-RPC / JSON-RPC
• AMF / RemoteObjects
• Etc …
![Page 11: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/11.jpg)
REST Advantages
• Stateless
• Cacheable
• Uniform interface
• Scalability
![Page 12: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/12.jpg)
2010: Mobile AppWeb Browser
Web Server
Data Service
JavaScript Client
HTML API
Mobile APP
![Page 13: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/13.jpg)
/conversations /users/3
/messages/222
/conversations_for_listview
![Page 14: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/14.jpg)
• /conversations
• /conversations_for_listview
• /conversations_special
• ….
![Page 15: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/15.jpg)
/users/3
/v1/users/3
/v1/users/3
/v2/users/3
![Page 16: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/16.jpg)
• /v1/conversations
• /v1/conversations_for_listview
• /v1/conversations_special
• /v2/conversations
• /v2/conversations_for_listview
• /v2/conversations_special
• ….
![Page 17: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/17.jpg)
REST problems
• Multiple round trip
• Versionning
• Endpoints multiplication
• No type system
![Page 18: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/18.jpg)
Facebook Netflix
GraphQL Falcor
![Page 19: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/19.jpg)
GraphQL
![Page 20: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/20.jpg)
What is GraphQL
• A query language for API
• ≠ Database query language
• Strongly Typed
• Hierarchical
![Page 21: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/21.jpg)
How does it works ?
• Define the types exposed by the service
• Define how the fields of those types are resolved
• Query
![Page 22: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/22.jpg)
Basic Query
![Page 23: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/23.jpg)
Nesting
![Page 24: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/24.jpg)
Arguments
![Page 25: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/25.jpg)
Alias
![Page 26: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/26.jpg)
Fragments
![Page 27: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/27.jpg)
Variables
![Page 28: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/28.jpg)
Mutations
![Page 29: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/29.jpg)
Types
![Page 30: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/30.jpg)
Query Response
![Page 31: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/31.jpg)
No versioning !
![Page 32: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/32.jpg)
Advantages
• Complex Query with only one Request
• Versioning Free
• Strongly Typed
• Introspection
![Page 33: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/33.jpg)
Examples
![Page 34: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/34.jpg)
Relay
![Page 35: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/35.jpg)
Relay• Data fetching framework for React
• Features :
• Declarative
• Query Colocation
• Automatic mutations management
![Page 36: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/36.jpg)
Container
![Page 37: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/37.jpg)
Container composition
![Page 38: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/38.jpg)
Variables
![Page 39: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/39.jpg)
Mutations
• Map a GraphQL mutation
• Declare how this mutation affects the Data State
• Declare Optimistic Response
• Better described by Example
![Page 40: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/40.jpg)
Examples
![Page 41: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/41.jpg)
Relay Advantages
• Query Colocation = Isolation
• Declarative
• Productive
![Page 42: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/42.jpg)
Relay Drawbacks
• Assumptions on how the GraphQL schema is structured
• Black Box
• Complex
• Does not suit all the applications
![Page 43: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/43.jpg)
![Page 44: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/44.jpg)
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 …
![Page 45: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/45.jpg)
Apollo client
![Page 46: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/46.jpg)
Apollo Client vs Relay
• No build step
• Not assumptions on Schema• http://www.codazen.com/choosing-graphql-client-apollo-vs-relay/
![Page 47: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/47.jpg)
Queries
![Page 48: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/48.jpg)
Mutations
![Page 49: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/49.jpg)
Optimistic Updates
![Page 50: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/50.jpg)
Apollo Advantages
• Flexibility
• Simplicity
• Evolving Fast
• Integrate well with third party library
![Page 51: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/51.jpg)
Apollo Drawbacks• No Container composition (not entirely true)
• No errors at build time
• Less « magic »
• Perhaps less performant ?
• Not Facebook ? :p
![Page 52: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/52.jpg)
François de Campredon
@fdecampredonhttps://github.com/fdecampredon/
Thanks !
GraphQL: http://graphql.org/Relay: https://facebook.github.io/relay/Apollo: http://dev.apollodata.com/
![Page 53: How Master GraphQL by Francois de Campredon](https://reader031.vdocuments.site/reader031/viewer/2022030304/58762b241a28ab8b7b8b6849/html5/thumbnails/53.jpg)
SEE YOU SOON!SEE YOU SOON!
THEFAMILY.CO