Vue3中使用Apollo Composable执行Mutation后如何更新UI与本地缓存？

首先纠正你代码里的两个明显问题：

• cache.writeDate 是拼写错误，正确写法为 cache.writeData
• insertRecipe 的第二个参数应为配置对象，不能直接传入缓存操作

下面提供两种可靠的缓存更新方案，按需选择：

方案一：使用Mutation的update选项手动更新缓存 #

这是最灵活的方式，适合需要精准控制缓存内容的场景。前提是你有一个用于获取菜谱列表的Query（比如GET_RECIPES）。

修改代码如下：

// 假设你已定义获取菜谱列表的Query
import { GET_RECIPES } from './your-queries-file';

const { mutate: insertRecipe, result, onDone } = useMutation(INSERT_RECIPE);

const onSubmit = (values) => {
  insertRecipe({
    variables: {
      title: values.title,
      description: values.description,
      category: selectedPerson.value.name,
      image: values.image,
      ingredients: ingredient.value.ingredients.toString(),
      preparation_time: values.preparation_time,
      steps: ingredient.value.steps.toString(),
    },
    update: (cache, { data: { insertRecipe } }) => {
      // 从缓存读取现有菜谱列表
      const existingRecipes = cache.readQuery({ query: GET_RECIPES })?.recipes || [];
      // 将新菜谱添加到列表（头部/尾部按需调整）
      const updatedRecipes = [insertRecipe, ...existingRecipes];
      // 将更新后的列表写回缓存
      cache.writeQuery({
        query: GET_RECIPES,
        data: { recipes: updatedRecipes }
      });
    }
  });
};

onDone(() => {
  // 可在此处执行跳转或提示，比如跳转到菜谱列表页
  router.push('/recipes');
});

方案二：使用refetchQueries自动重新获取数据 #

如果不需要手动修改缓存，只想让Apollo重新执行列表查询同步UI，可采用此方案：

const onSubmit = (values) => {
  insertRecipe({
    variables: {
      title: values.title,
      description: values.description,
      category: selectedPerson.value.name,
      image: values.image,
      ingredients: ingredient.value.ingredients.toString(),
      preparation_time: values.preparation_time,
      steps: ingredient.value.steps.toString(),
    },
    refetchQueries: [
      { query: GET_RECIPES } // 指定要重新执行的查询
    ]
  });
};

关键注意事项 #

• 确保INSERT_RECIPE Mutation返回新创建的完整菜谱对象（包含唯一id等标识字段），Apollo才能正确识别并更新缓存。
• 若菜谱列表查询带有变量（如分页、筛选），refetchQueries需传入对应变量，保证重新获取的数据与之前一致。

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