Why GraphQL: A React Developer's Perspective

React Bangalore Meetup May 2018

Transcript

1. Why GraphQL: A React Developer’s Perspective
2. Hello! I am Praveen Durairaj Application Engineer - Hasura twitter.com/praveenweb github.com/praveenweb 2
3. What is GraphQL • Query Language • Declarative, Type safe • Server-side runtime • Better REST ? 3
4. • Type-safe schema with introspection • Endpoint is the same - /graphql • Always fetch what you want • Versioning made easy Let that sink in! 4
5. const typeDefs = ` type CityWeather { temp: String min_temp: String max_temp: String city_name: String! applicable_date: String! } type Query { cityWeather(city_name: String! applicable_date: String): CityWeather } `; 5
6. • Type-safe schema with introspection • Endpoint is the same - /graphql • Always fetch what you want • Versioning made easy Let that sink in! 6
7. 7
8. • Type-safe schema with introspection • Endpoint is the same - /graphql • Always fetch what you want • Versioning made easy Let that sink in! 8
9. • Type-safe schema with introspection • Endpoint is the same - /graphql • Always fetch what you want • Versioning made easy Let that sink in! 9
10. 10
11. 11 How is the Developer Workflow?
12. API Explorer Query Validation Caching Developer Tooling Autocomplete Mocking Predictable 12
13. API Explorer GraphiQL Know what you can request Code intelligence 13
14. Validation & Autocomplete Autocomplete during development Query validation 14
15. 15 DEMO
16. Caching - Leverage unique identifiers for client side caching - Directives with Apollo Server 16
17. Response Caching 17
18. Schema Stitching - Merge multiple graphql schemas into a single endpoint - Extend existing schema 18
19. 19
20. 20 - Person Schema - Extend it with weather - Merge and query
21. Downsides? - Exposing db / api schema to client - Managing schema - Moving the load server side 21
22. 22 Thanks! Any questions? You can find me at @praveenweb & praveen@hasura.io