Apollo GraphQL结合Nextjs使用时Delete Mutation后未重拉Query如何解决

排查及修复方案 #

1. 核对查询字段名一致性
   你新增操作中读取缓存用的字段是mainCategories，删除操作里读的是getMainCategories，如果FETCH_MAINCATEGORIES_QUERY定义的返回字段和其中任意一个不匹配，缓存读写就会失效，先确认查询返回的字段名，保证两处读写用的key完全一致。

2. 补全客户端组件声明
   Next.js 13及以上版本默认所有组件为服务端组件，没有加'use client'声明的组件无法正常运行React客户端钩子，检查DeleteButton、表格组件、表单组件的顶部是否添加了'use client'指令。

3. 补全删除mutation的refetch配置
   你当前贴出的DeleteButton代码中没有添加refetchQueries配置，添加时额外加上awaitRefetchQueries保证查询完成再执行后续逻辑，示例如下：

const [deleteMainCategoryOrMutation] = useMutation(mutation, {
  update(proxy) {
    // 原有逻辑
  },
  variables: {
    mainCategoryId,
  },
  // 新增以下配置
  refetchQueries: [{ query: FETCH_MAINCATEGORIES_QUERY }],
  awaitRefetchQueries: true
});

4. 修正缓存更新写法
   Apollo缓存要求不可变更新，你现在直接修改读取到的data对象属性会导致缓存更新无法触发，调整为如下写法：

if (mainCategoryId) {
  const { getMainCategories } = proxy.readQuery({
    query: FETCH_MAINCATEGORIES_QUERY,
  });
  const newCategories = getMainCategories.filter(
    (ap) => ap.id !== mainCategoryId
  );
  toast.error(`Main Category Deleted`, { autoClose: 2000 });
  proxy.writeQuery({ 
    query: FETCH_MAINCATEGORIES_QUERY, 
    data: { getMainCategories: newCategories } 
  });
}

5. 确认Apollo Client为单例
   如果你的Apollo Client实例没有做单例处理，Next.js服务端渲染过程中会重复生成实例，导致多个组件缓存无法共享，检查Apollo Client的初始化逻辑，保证全局只有一个实例供所有客户端组件调用。

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