GraphQL + relay
3 likes1,592 views
The document discusses GraphQL, an open-sourced specification developed by Facebook for querying and mutating data in a declarative manner. It includes details about key concepts, implementation examples with the Star Wars API (swapi), and the integration of Relay for enhancing data fetching in modern web applications. Additionally, it highlights the complexities of using mutations and the necessity of effective data management strategies.
![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](https://image.slidesharecdn.com/graphqlrelay-160427074034/85/GraphQL-relay-16-320.jpg)
GraphQL + relay
- 1. GraphQL + Relay @telligcirdec + @catelandaxel
- 2. Cédric GILLET Développeur JAVA / Architect Axel CATELAND Développeur Frontend / Leadtech Front Bientôt =>
- 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
- 8. GraphQL Implementation Exploitation May the force be with you !
- 9. Meet SWAPI A P I SWAPI
- 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
- 11. SWAPI Examples GO ! GO ! GO ! SWAPI
- 12. GraphQL : Mapping Consist of creating links between the backend data and graphql fields 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
- 16. 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
- 17. GraphQL : Arguments ● Arguments allow to pass arguments to your GraphQL query { posts(category:METEOR){ title, category, content } } SWAPI
- 18. GraphQL : Adding cache Adding cache not on the GraphQL schema but on data fetcher. SWAPI
- 19. GraphQL : Several data sourcesSWAPI
- 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) }
- 22. GraphQL usefull links ● http://graphql.org/ ● http://facebook.github.io/graphql/ ● https://sandbox.learngraphql.com/ ● https://learngraphql.com/ ● https://code.facebook.com
- 23. Relay Best use of GraphQL for moderns webapps ? Why ? How ?
- 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
- 26. Relay.route A query targeting an entry point of our GraphQL endpoint.
- 27. Relay.RootContainer Compose a Relay Route and a Relay enhanced component.
- 28. Relay.container Wrap a React component. Declare needed data inside a GraphQL Fragment
- 29. Lets start to compose
- 31. Relay compose and solve ! Under data fetching Over data fetching Use the best of GraphQL tl/dr kill the need of ad’hoc endpoints
- 35. Solved !
- 36. Store ? Relay graph local cache Reducing graph request sent to GraphQL endpoint Reducing graph response Pushing mutations
- 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
- 41. Mutation - Welcome to hell (seriously hardest part of relay)
- 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.
- 43. Mutation - payload intersection
- 44. App State Binding with app routing No app state stored only app data
- 46. QUESTION(S) ?