Full Stack Cache

The shopping list app below has three broken features: 1. Adding an item: The mutation succeeds but the new item does not appear until page refresh. 2. Deleting an item: The mutation succeeds but the item stays visible in the list. 3. Pagination: Clicking "Load More" replaces the visible items instead of appending. Your task: 1. Add an optimisticResponse and update callback for the add mutation (cache.modify to append the new item ref). 2. Add an update callback for the delete mutation that uses cache.evict + cache.gc. 3. Configure typePolicies with a merge function for the "items" field to support pagination. This challenge combines three core cache management patterns into one cohesive solution.

Problem Code

import React, { useState } from 'react';
import {
  useQuery,
  useMutation,
  gql,
  ApolloClient,
  InMemoryCache,
} from '@apollo/client';

const GET_ITEMS = gql`
  query GetItems($offset: Int!, $limit: Int!) {
    items(offset: $offset, limit: $limit) {
      id
      name
      quantity
      category
    }
  }
`;

const ADD_ITEM = gql`
  mutation AddItem($name: String!, $quantity: Int!, $category: String!) {
    addItem(name: $name, quantity: $quantity, category: $category) {
      id
      name
      quantity
      category
    }
  }
`;

const DELETE_ITEM = gql`
  mutation DeleteItem($id: ID!) {
    deleteItem(id: $id) {
      id
    }
  }
`;

const LIMIT = 10;

// Bug 3: no merge function — pagination replaces instead of appending
const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
});

const ShoppingList = () => {
  const [name, setName] = useState('');
  const [quantity, setQuantity] = useState(1);
  const [category, setCategory] = useState('General');
  const [offset, setOffset] = useState(0);

  const { data, loading, fetchMore } = useQuery(GET_ITEMS, {
    variables: { offset: 0, limit: LIMIT },
  });

  // Bug 1: no optimistic response or cache update for add
  const [addItem] = useMutation(ADD_ITEM, {
    refetchQueries: [{ query: GET_ITEMS, variables: { offset: 0, limit: LIMIT } }],
  });

  // Bug 2: no cache update for delete
  const [deleteItem] = useMutation(DELETE_ITEM);

  const handleAdd = () => {
    if (!name.trim()) return;
    addItem({ variables: { name, quantity, category } });
    setName('');
    setQuantity(1);
  };

  const handleDelete = (id: string) => {
    deleteItem({ variables: { id } });
  };

  const handleLoadMore = () => {
    const nextOffset = offset + LIMIT;
    setOffset(nextOffset);
    fetchMore({ variables: { offset: nextOffset, limit: LIMIT } });
  };

  if (loading && !data) return <p>Loading shopping list...</p>;

  return (
    <div>
      <h1>Shopping List</h1>
      <div>
        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Item name" />
        <input type="number" value={quantity} onChange={(e) => setQuantity(Number(e.target.value))} />
        <select value={category} onChange={(e) => setCategory(e.target.value)}>
          <option>General</option>
          <option>Produce</option>
          <option>Dairy</option>
          <option>Meat</option>
        </select>
        <button onClick={handleAdd}>Add Item</button>
      </div>
      <ul>
        {data?.items.map((item: { id: string; name: string; quantity: number; category: string }) => (
          <li key={item.id}>
            {item.name} x{item.quantity} [{item.category}]
            <button onClick={() => handleDelete(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={handleLoadMore} disabled={loading}>Load More</button>
    </div>
  );
};

export default ShoppingList;