Supercharge React Applications with Modern GraphQL Backends

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. By the end, participants will have a comprehensive toolkit for crafting scalable, GraphQL-integrated React applications.

Prerequisites

• Basic understanding of TypeScript and React.
• Familiarity with Node.js (recommended).
• pnpm pre-installed.

Learning Objectives

• Grasp the advantages of using GraphQL in web development.
• Query and update data using GraphQL within React applications.
• Master advanced client-side GraphQL features like fragments, mutation cache, and optimistic UI.
• Implement real-time updates with GraphQL subscriptions.

Curriculum

Session 1: Introduction to GraphQL in React

• Quick overview of GraphQL benefits over REST.
• Setting up Apollo Client in a React project.

Session 2: Deep Dive into Queries and Mutations

• Crafting queries and mutations with Apollo Client.
• Efficient data fetching with fragments.
• Exploring mutation cache strategies for optimizing performance.
• Implementing optimistic UI updates for a seamless user experience.

Session 3: Advanced Client Features and Real-time Data

• Managing local state with Apollo Client.
• Real-world examples of optimistic UI in action.
• Setting up and using GraphQL subscriptions for live data updates.
• Best practices for handling loading states and errors in a user-friendly way.

By the conclusion of this workshop, attendees will have a thorough understanding of how to leverage GraphQL's powerful features within React applications, focusing on creating dynamic, efficient, and real-time web experiences.