Why GraphQL: A React Developer's Perspective

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