执行Mutation后，如何安全更新未缓存的Apollo Client查询缓存？

Great question—this is a super common gotcha when working with Apollo Client, especially in cases where you might run a mutation before ever fetching the associated query (like right after a page reload). Let’s break down a few clean, safe ways to handle this without relying on messy try/catch blocks everywhere (though we’ll cover when try/catch is actually okay too).

1. 提前初始化缓存条目 #

The simplest approach is to pre-seed the cache with a default value for your query when your app or component initializes. This ensures writeQuery always has something to update later.

For example, if your query is GET_TODOS:

// 在App启动时或者组件的useEffect里执行
client.writeQuery({
  query: GET_TODOS,
  data: { todos: [] } // 用空数组作为默认的初始状态
});

Now when you run your mutation and call writeQuery to add a new todo, the cache already exists—no more errors. This works well for queries where you know the expected shape of the data upfront.

2. 在Mutation的update函数中容错读取缓存 #

If pre-seeding isn’t feasible (maybe the query depends on dynamic variables), you can safely handle missing cache entries directly in your mutation’s update function. Using try/catch here is actually a valid pattern because Apollo explicitly throws an error when readQuery can’t find the cache entry.

Here’s how to implement it:

const [addTodo] = useMutation(ADD_TODO, {
  update(cache, { data: { addTodo } }) {
    let existingTodos;
    try {
      // 尝试读取现有缓存
      existingTodos = cache.readQuery({ query: GET_TODOS });
    } catch (error) {
      // 缓存不存在时，使用默认值
      existingTodos = { todos: [] };
    }

    // 写入更新后的数据
    cache.writeQuery({
      query: GET_TODOS,
      data: { todos: [...existingTodos.todos, addTodo] }
    });
  }
});

This keeps all the cache logic contained within the mutation, and the try/catch is targeted only at handling the missing cache case—no need for global error handling.

3. 使用cache.modify替代writeQuery #

Apollo’s cache.modify method is more flexible than writeQuery because it lets you set default values for missing fields directly. This avoids the need for try/catch entirely.

Here’s an example where we add a new todo to a potentially non-existent todos field:

const [addTodo] = useMutation(ADD_TODO, {
  update(cache, { data: { addTodo } }) {
    cache.modify({
      fields: {
        // 如果todos字段不存在，默认使用空数组
        todos(existingTodos = [], { readField }) {
          // 先写入新todo的片段到缓存
          const newTodoRef = cache.writeFragment({
            data: addTodo,
            fragment: gql`
              fragment NewTodo on Todo {
                id
                text
                completed
              }
            `
          });
          // 返回更新后的数组（包含新todo）
          return [...existingTodos, newTodoRef];
        }
      }
    });
  }
});

When your GET_TODOS query finally runs later, Apollo will resolve the references in the cache and return the updated list—seamlessly.

为什么官方文档没重点提这个？ #

Most Apollo examples assume you’ll fetch a query first before modifying it, which is the common path. But real-world apps often have cases where mutations happen before queries (like adding a resource before viewing the list). These workarounds are all officially supported, even if they’re not front-and-center in the docs.

内容的提问来源于stack exchange，提问作者Kendall