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 • Intro • Learn GraphQL basics • Build GraphQL queries & mutations • Get familiar with the GraphQL client • Implement queries & mutations on the client • GraphQL & React Server Components • Access control & authorization • Optimistic UI • Production deployment
4. GraphQL
5. Query Language for APIs
7. Ask for what you want And get predictable results
9. State of GraphQL
15. Describe your data
17. User
18. Post
19. Post User
20. User Post
21. User Post name email username bio age posts message from reactions
22. Schema Definition Language Or just – SDL
24. GraphQL scalar types That are available out of the box • Int • Float • String • Boolean • ID
29. Ask for what you want
30. Ask for what you want and get predictable results
33. Language-agnostic
35. Why GraphQL?
36. 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
37. Stack without GraphQL
38. Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql- fi t-in-the-stack-modern-app-development-with-graphql
39. Stack with GraphQL
40. Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql- fi t-in-the-stack-modern-app-development-with-graphql
41. Source: https://www.apollographql.com/blog/backend/architecture/where-does-graphql- fi t-in-the-stack-modern-app-development-with-graphql
42. Tooling
43. GraphQL Explorers
44. GraphiQL
45. Apollo Explorer
46. Let’s code! github.com/glennreyes/react-graphql-workshop