NextJS中Apollo Client执行mutation后数据不刷新如何解决？

问题修复方案 #

1. API重复调用问题排查方向 #

• 首先排查是否开启了React严格模式，开发环境下严格模式会主动执行两次副作用函数用于检测代码是否存在副作用问题，该情况仅在开发环境出现，生产环境会自动恢复正常，无需额外处理，可临时关闭严格模式验证调用次数是否恢复正常。
• 检查表单提交事件/按钮点击事件是否存在重复绑定的情况，比如同时给表单和提交按钮都绑定了提交触发逻辑，或者事件监听被注册了多次。
• 排查CREATE_USER_CLASS这个mutation是否在当前组件外的其他位置也被触发执行。

2. 页面未同步刷新问题修复 #

你当前的代码存在配置层级错误：awaitRefetchQueries是和variables、refetchQueries平级的配置参数，不需要包裹在options字段内，错误的层级导致refetch逻辑未按预期执行，提前触发了handleClose，页面自然不会刷新。

同时建议给refetch的查询指定网络请求策略，避免直接读取旧缓存，修正后的代码如下：

const [createType, { loading, data }] = useMutation(CREATE_USER_CLASS) //mutation query

const createUserClass = async (event) => {
    event.preventDefault();
    try {
      const { data } = await createType({
        variables: {
          userClassName,
        },
        refetchQueries: [{ query: STACKINFO, fetchPolicy: 'network-only' }],
        // 移除外层options，直接平级配置awaitRefetchQueries
        awaitRefetchQueries: true,
      });
      setNotification({
        message: 'User class created successfully',
        code: 200,
      });

      handleClose();
    } catch (e) {
      setNotification({ message: e.message, code: 400 });
      handleClose();
    }
  };

如果修改配置后还是没有刷新，可以检查STACKINFO查询返回的列表数据是否包含新增的user class条目，确认接口返回正常的情况下，也可以手动更新apollo缓存代替refetchQueries，性能更好：

// 示例手动更新缓存逻辑，放在createType的配置项中即可
update(cache, { data: { createUserClass } }) {
  const { stackInfo } = cache.readQuery({ query: STACKINFO });
  cache.writeQuery({
    query: STACKINFO,
    data: { stackInfo: [...stackInfo, createUserClass] },
  });
}

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