Optimistic UI updates in GraphQL - Mini Project: Build & Apply

Optimistic UI Updates with GraphQL

📖 Scenario: You are building a simple task management app where users can add tasks. To make the app feel fast, you want to show new tasks immediately in the UI before the server confirms the addition. This technique is called optimistic UI updates.

🎯 Goal: Create a GraphQL mutation setup that includes an optimistic response to update the UI instantly when adding a new task.

📋 What You'll Learn

Create a GraphQL mutation called ADD_TASK that adds a task with id and title fields.

Define a variable called newTask with id and title values.

Use an optimisticResponse object that matches the mutation shape with the newTask data.

Include the update function to update the cache with the new task.

💡 Why This Matters

🌍 Real World

Optimistic UI updates make apps feel faster by showing changes immediately without waiting for server confirmation.

💼 Career

Understanding optimistic updates is important for frontend developers working with GraphQL and Apollo Client to improve user experience.

1

Define the GraphQL mutation

Create a GraphQL mutation called ADD_TASK using the gql tag. The mutation should be named addTask and accept a title argument of type String!. It should return the id and title of the added task.

GraphQL

import { gql } from '@apollo/client';

// Define the ADD_TASK mutation
// Your code here

Need a hint?

Use the gql tag to define a mutation named addTask that takes a title argument and returns id and title.

2

Create the new task variable

Create a constant variable called newTask with an id of "temp-id-1" and a title of "Learn optimistic UI".

GraphQL

import { gql } from '@apollo/client';

const ADD_TASK = gql`
  mutation addTask($title: String!) {
    addTask(title: $title) {
      id
      title
    }
  }
`;

// Create the newTask object
// Your code here

Need a hint?

Define newTask as an object with the exact id and title values.

3

Add the optimisticResponse object

Create a constant called optimisticResponse that matches the mutation shape. It should have an addTask field containing the newTask object.

GraphQL

import { gql } from '@apollo/client';

const ADD_TASK = gql`
  mutation addTask($title: String!) {
    addTask(title: $title) {
      id
      title
    }
  }
`;

const newTask = {
  id: "temp-id-1",
  title: "Learn optimistic UI"
};

// Create optimisticResponse matching the mutation
// Your code here

Need a hint?

The optimisticResponse object should have a field named addTask set to newTask.

4

Write the update function to modify the cache

Write a function called update that takes cache and { data: { addTask } } as parameters. Inside, call cache.modify to add addTask to the tasks field in the cache.

GraphQL

import { gql } from '@apollo/client';

const ADD_TASK = gql`
  mutation addTask($title: String!) {
    addTask(title: $title) {
      id
      title
    }
  }
`;

const newTask = {
  id: "temp-id-1",
  title: "Learn optimistic UI"
};

const optimisticResponse = {
  addTask: newTask
};

// Write the update function to add the new task to the cache
// Your code here

Need a hint?

Use cache.modify to update the tasks field by appending the new task reference created with cache.writeFragment.