Fix Cache Update Not Reflecting in GraphQL: Simple Steps

To fix cache update not reflecting in GraphQL, ensure you update the cache manually after mutations using cache.modify or cache.writeQuery. This tells the client to refresh the cached data so UI shows the latest results.

Why This Happens

GraphQL clients like Apollo cache query results to speed up UI rendering. When you run a mutation, the cache does not automatically know how to update related queries. So, the UI still shows old data from cache.

This happens because the cache update logic is missing or incorrect.

javascript

const [addTodo] = useMutation(ADD_TODO);

addTodo({ variables: { text: 'New task' } });

// UI does not show new todo because cache is not updated

Output

UI still shows old todo list without the new task

The Fix

After a mutation, update the cache manually to reflect changes. Use cache.modify or cache.writeQuery inside the mutation's update function. This tells Apollo how to merge new data into cached queries.

javascript

const [addTodo] = useMutation(ADD_TODO, {
  update(cache, { data: { addTodo } }) {
    cache.modify({
      fields: {
        todos(existingTodos = []) {
          const newTodoRef = cache.writeFragment({
            data: addTodo,
            fragment: gql`fragment NewTodo on Todo { id text completed }`
          });
          return [...existingTodos, newTodoRef];
        }
      }
    });
  }
});

addTodo({ variables: { text: 'New task' } });

Output

UI updates immediately showing the new todo in the list

Prevention

Always plan cache updates when writing mutations. Use Apollo DevTools to inspect cache changes. Follow these best practices:

• Use update function to modify cache after mutations.
• Write fragments for new data to insert into cache.
• Test UI updates after mutations to catch cache issues early.
• Consider using refetchQueries if manual cache updates are complex.

Related Errors

Other common cache-related errors include:

• Stale UI after mutation: Fix by updating cache or refetching queries.
• Duplicate items in cache: Ensure unique IDs and proper merge logic.
• Cache eviction issues: Use cache.evict carefully to remove outdated data.

Key Takeaways

Always update the cache manually after mutations to keep UI data fresh.

Use Apollo's cache.modify or cache.writeQuery inside the mutation update function.

Write fragments for new data to insert correctly into the cache.

Test UI after mutations to catch cache update issues early.

Use refetchQueries as a fallback if manual cache updates are complex.