GraphQL for React Developers

In this workshop, participants will learn how to leverage GraphQL to build powerful and efficient backends for their React applications.

Transcript

1. @glnnrys · glennreyes.com GraphQL For React Developers
2. Glenn Reyes @glnnrys · glennreyes.com Software Engineer, Tech Speaker & Workshop Instructor
3. Plan for today GraphQL for React Developers 1. Intro 2. Learn GraphQL basics 3. Build GraphQL queries & mutations ( Exercise 01 ) 4. Mutations, cache & optimistic UI ( Exercise 02 ) 5. GraphQL with Server Components & React 19 6. Real-time updates with Subscriptions ( Exercise 03 ) 7. Recap & Q&A 15 mins 45 mins 45 mins 45 mins 30 mins 30 mins 15 mins
4. GraphQL
5. Query Language for APIs
6. The Query Language for modern APIs
9. l.graphql.org
12. Describe your data
14. User
15. Post
16. Post User
17. User Post
18. User Post name email username bio age posts message from reactions
19. Schema Definition Language Or just – SDL
21. GraphQL scalar types That are available out of the box • Int • Float • String • Boolean • ID
26. Ask for what you want
27. Ask for what you want and get predictable results
30. Language-agnostic
32. Why GraphQL?
33. Single Endpoint Flexibility for Frontend Teams Evolvable API design Real-time data with Subscriptions Exact Data Retrieval Introspection Rich Ecosystem & Tooling Aggregated Data Sources Here’s another Strong Typed Schema
34. Stack without GraphQL
35. Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql- fi t-in-the-stack-modern-app-development-with-graphql
36. Stack with GraphQL
37. Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql- fi t-in-the-stack-modern-app-development-with-graphql
38. Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql- fi t-in-the-stack-modern-app-development-with-graphql
39. GraphQL Explorer
40. GraphiQL
41. Let’s code! github.com/glennreyes/graphql-workshop