Client-Side GraphQL with React, v2

Scott Moss

Scott Moss

Superfilter AI
2 hours, 54 minutes CC
Client-Side GraphQL with React, v2

Course Description

Use type-safe GraphQL APIs in your React applications. Learn the GraphQL Query Language and write queries and mutations while building a data layer with the Urql GraphQL client. Add more complexity with authentication, nested queries, and optimistic updates. Understand caching and other API performance techniques.

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: June 25, 2024

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 13 minutes
  • Introduction
    Scott introduces the course and discusses the course prerequisites, including knowledge of React and JavaScript, as well as some experience with interacting with APIs. He also provides a brief overview of the app and what will be covered in the course.
  • Course Setup
    Scott provides a setup guide and explains the tools and dependencies needed, such as Git, Node.js, and Turso. He walks through the process of creating a Turso account, downloading the CLI, and creating a token for the database. He also explains how to set up environment variables and push the schema to the database.

Graph Query Language

Section Duration: 1 hour, 23 minutes
  • What is GraphQL
    Scott describes GraphQL as a powerful query language for APIs that allows clients to request exactly what they need and nothing more. He discusses the advantages of GraphQL over REST, such as type safety and the ability to query highly relational data in any format. Scott also provides examples of GraphQL queries and explains the basic building blocks of a query, including fields, nested objects, and arguments.
  • GraphQL Playground in Apollo Studio
    Scott introduces the Star Wars API and demonstrates how to use the provided Apollo Studio app to retrieve data from the API. He also explains the syntax for using arguments in GraphQL queries and demonstrates how to pass arguments to retrieve specific data.
  • Project App Tour
    Scott introduces the application that will be built and provides a brief overview of its functionality. He demonstrates how to run the completed app and explains that this course will focus on writing the queries and mutations in GraphQL for the desired user experience.
  • GraphQL Query with fetch
    Scott discusses using fetch to send a GraphQL query as a POST request, with the query stringified and included in the body of the request. When using GraphQL, all responses have a 200 status code and errors are indicated in the "errors" field of the response data. He highlights the importance of checking the payload of the response to determine if there were any errors, as browsers and clients may not automatically recognize and display GraphQL errors.
  • Setup Urql Provider & Caching
    Scott introduces the Urql library as a lightweight alternative to Apollo for client-side GraphQL. He walks through the process of setting up the urql client in a React app by creating a GQLProvider component that wraps the entire app and provides the client instance. The GQLProvider uses the Urql library to create a client with the necessary plugins and options, including the cache exchange and fetch options.
  • Next.js & Course Project Q&A
    Scott answers various questions from students such as the use of parentheses in Next.js routes, the relevance of server-side rendering (SSR) and caching in Next.js, when to use types in code, the advantages of using GraphQL in a microservice architecture, and setting headers in the Next.js config for access control.
  • Creating a Sign Up Mutation
    Scott demonstrates how to use the GraphQL API explorer to create a mutation for signing up a user. He walks through the process of creating the mutation, specifying the required input arguments, and selecting the desired fields to be returned. He also explains the concept of input arguments, how they map to the variables passed in the GraphQL query, and how to export the mutation and use it in a separate file for the sign-up functionality.
  • Using Mutations in React
    Scott demonstrates how to implement sign-up and sign-in functionality using GraphQL mutations. He creates the mutations and uses the `useMutation` hook to handle the mutations in the component. Scott also shows how to handle the response from the server and perform actions such as setting the token in local storage and redirecting the user to the homepage.

Queries for Creating & Updating Data

Section Duration: 1 hour, 12 minutes
  • Nested Data Queries
    Scott demonstrates how to make a query to retrieve issues from a GraphQL server using Apollo Studio to explore the schema and write the query. He also explains the concept of nested queries and the potential performance issues that can arise from recursive queries. Scott then shows an example of a recursive query and mentions some potential solutions to handle these performance issues.
  • Project Issues Queries
    Scott explains how to create a query to fetch data from a GraphQL server using Urql in a React application. He demonstrates how to define the query, import it into the app, and use the `useQuery` hook to execute the query and handle loading and error states. He also shows how to map over the data and render the results in the component.
  • Wiring Queries to the UI
    Scott demonstrates how to implement a create issue functionality in a web application using GraphQL and Apollo. He explains the process of making a mutation request to the server, handling the response, and updating the UI to display the newly created issue without having to refresh the page.
  • Refreshing Issues & Optimistic Updates
    Scott discusses different solutions for updating data in a to-do list without refreshing the page. He explores options such as rerunning the query, using real-time updates, and implementing optimistic updates. Scott also briefly explains the purpose of the .db and .migrations folders in the project, which are related to the database schema and migrations.
  • Update Issue Mutation
    Scott explains how to implement a mutation to edit an issue in a GraphQL schema. He demonstrates how to create the mutation in the schema and then import and use it in the component where the editing functionality will be implemented. Scott also discusses how Urql, a caching library, can automatically update the cache when the mutation is performed, without the need for a network request.
  • Urql Q&A
    Scott discusses interacting with the local cache in Urql and answers a student's question regarding Urql compared to Apollo. He also discusses the use case for tools like Click for moving data between different sources.

Wrapping Up

Section Duration: 4 minutes
  • Wrapping Up
    Scott wraps up the course by recommending building a UI where users can delete an issue using GraphQL mutations. He also mentions additional resources such as alternative libraries, code generation, and best practices in the GraphQL documentation.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now