Welcome to the GraphQL workshop for React developers! ☀️
This workshop is all about using GraphQL in React applications. We'll provide you with a pre-configured setup designed for scalability, focusing on how the client interacts with GraphQL. From there, we'll explore advanced features of GraphQL, such as fragments, mutation cache, optimistic UI, and subscriptions. We'll also touch briefly on how GraphQL fits into the evolving React ecosystem, including emerging patterns with React 19 and Server Components. By the end, participants will have a comprehensive toolkit for crafting scalable, GraphQL-integrated React applications.
👉 Slides: GraphQL for React Developers (Speaker Deck)
Live demo: https://graphql-workshop.vercel.app
- Frontend (Vercel): graphql-workshop.vercel.app
- GraphQL API (Fly.io): graphql-workshop.fly.dev/graphql
- Repository: github.com/glennreyes/graphql-workshop
The production API uses a lightweight SQLite database (
dev.db). It lives on the Fly volume and is seeded during deployment; plan for routine pruning or migrations before storing larger datasets.
- Get started by cloning this repo and installing the dependencies:
git clone https://github.com/glennreyes/graphql-workshop.git
cd graphql-workshop
pnpm install- Start the development servers:
pnpm dev- Open GraphQL Explorer at http://localhost:4000/graphql and the React app at http://localhost:3000.
Exercise handouts live in
docs/exercises:
Time: 9:00 – 13:00 (4h including breaks)
- Quick intro, workshop goals, what we'll build.
- Verify starter project is running.
- Quick conceptual overview: Queries, Mutations, Subscriptions.
- Schema-first vs. Code-first explained.
- Resolvers & context (at a high level).
- No live coding — show a pre-made resolver/schema example.
- Transition immediately: "Let's see this in action with the Explorer."
- Run queries in GraphQL Explorer (playground).
- How to shape queries + test mutations.
- React client setup with Apollo.
- Fragments & co-location of data.
- Demo: fetch + display data, then refactor with fragments.
- 💎 Run queries in the GraphQL Explorer to fetch posts and users
- 💎 Implement query in
user-avatar.tsx - 💎 Implement query in
home-feed.tsx - 💎 Implement queries in
profile-page.tsx - 💎 Refactor queries using fragments for better data co-location
- Write mutations & inspect results.
- Cache updates.
- Optimistic UI.
- 💎 Implement mutation in
create-post-form.tsx - 💎 Implement mutation in
delete-post-dialog.tsx - 💎 Implement mutation in
edit-profile.tsx - 💎 Add cache updates after mutations
- 💎 Implement optimistic UI for create/delete operations
- GraphQL with Server components.
- React 19 patterns.
- Advanced techniques: streaming, suspense, error boundaries.
- Group discussion: challenges & trade-offs.
- Subscription setup (server + client).
- Demo: live updates (chat/notifications).
- 💎 Explore the subscription setup in the client configuration
- 💎 Implement real-time post updates using subscriptions
- 💎 Handle subscription lifecycle (connection, reconnection, errors)
- https://www.apollographql.com/docs/react/data/subscriptions
- https://the-guild.dev/graphql/yoga-server/docs/features/subscriptions
- Open two tabs of http://localhost:3000/chat to verify messages sync in real time.
- Recap of flow: Queries → Mutations → Server Components → Subscriptions.
- Share resources & next steps.
- Open Q&A.