You don’t need a fancy framework to use GraphQL with React

Transcript

1. ! SAMER BUNA Author · EdgeCoders.com samerbuna You Don’t Need a Fancy Framework to Use GraphQL with React
3. /people/4 /planets/1 /films/1 /films/2 /films/3 /films/6 person(ID: 4) { name, planet { name }, films { title } } bit.ly/rest-vs-graphql
4. { "name": "Darth Vader", "height": "202", "mass": "136", "hair_color": "none", "skin_color": "white", "eye_color": "yellow", "birth_year": "41.9BBY", "gender": "male", "homeworld": "http://swapi.co/api/planets/1/", "films": [ "http://swapi.co/api/films/6/", "http://swapi.co/api/films/3/", "http://swapi.co/api/films/2/", "http://swapi.co/api/films/1/" ], "species": [ "http://swapi.co/api/species/1/" ], "vehicles": [], "starships": [ "http://swapi.co/api/starships/13/" ], "created": "2014-12-10T15:18:20.704000Z", "edited": "2014-12-20T21:17:50.313000Z", "url": "http://swapi.co/api/people/4/" } { "name": "Darth Vader", "planet": { "name": "Tatooine" }, "films": [ { "title": "A New Hope" }, { "title": "The Empire Strikes Back" }, { "title": "Return of the Jedi" }, { "title": "Revenge of the Sith" } ] } bit.ly/rest-vs-graphql
6. GraphQL is LEGEN — wait for it — DARY! bit.ly/why-graphql
7. REST is L — wait for it — D E — wait for it — A G — wait for it — R E — wait for it — Y N — wait for it — ! bit.ly/why-graphql
8. HOW GraphQL with React
9. • Performance • Batching • Pagination • Efficiency • New data only • Visible window data only Frameworks • Dealing with failures • Handling errors • Retries • Responsiveness • Optimistic updates • Cache management bit.ly/graphql-react
10. I need data person(ID: 4) { name, planet { name }, films { title } } bit.ly/graphql-react
11. person(ID: 4) { name, ...PlanetInfo films { ...FilmInfo } } <Person> <Planet /> <Film /> <Film /> <Film /> <Film /> </Person> bit.ly/graphql-react
12. bit.ly/graphql-react
14. graphfront.com