Downloaded 31 times
![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)
Uploaded byCédric GILLET
GraphQL + relay
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.
More Related Content
GraphQL + relay
- 1. GraphQL + Relay @telligcirdec+ @catelandaxel
- 2. Cédric GILLET Développeur JAVA/ Architect Axel CATELAND Développeur Frontend / Leadtech Front Bientôt =>
- 3.
- 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 NOTGraphQL ? ● 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 forcebe with you !
- 9. Meet SWAPI A PI SWAPI
- 10. Meet SWAPI ● TheStar 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 Consistof creating links between the backend data and graphql fields SWAPI
- 13.
- 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 AGraphQL 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 : Addingcache Adding cache not on the GraphQL schema but on data fetcher. SWAPI
- 19. GraphQL : Severaldata sourcesSWAPI
- 20. GraphQL : Mutations Creatinga specific endpoint on the GraphQL Schema for a client to ask for data mutation on the backend data SWAPI
- 21. GraphQL : Directivesand 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 ofGraphQL for moderns webapps ? Why ? How ?
- 24. How relay helpus ? ● 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 datato components ! Expliquer le mapping de données sur un composant Relay container Relay route
- 26. Relay.route A query targetingan entry point of our GraphQL endpoint.
- 27. Relay.RootContainer Compose a RelayRoute and a Relay enhanced component.
- 28. Relay.container Wrap a React component. Declareneeded data inside a GraphQL Fragment
- 29. Lets start tocompose
- 30.
- 31. Relay compose andsolve ! Under data fetching Over data fetching Use the best of GraphQL tl/dr kill the need of ad’hoc endpoints
- 32.
- 33.
- 34.
- 35.
- 36. Store ? Relay graphlocal cache Reducing graph request sent to GraphQL endpoint Reducing graph response Pushing mutations
- 37.
- 38.
- 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 tosave 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 - Welcometo hell (seriously hardest part of relay)
- 42. Mutation Relay push mutationto 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 - payloadintersection
- 44. App State Binding withapp routing No app state stored only app data
- 45.
- 46.