页面重载后执行Mutation时useQuery响应未更新触发404问题

问题核心 #

页面重载后首次通过Mutation创建"view"时，会触发404页面，点击返回后第二次操作恢复正常。调试确认：网络请求返回的show已包含新创建的view，但useQuery获取的缓存响应未同步更新，导致根据ID查找view返回undefined，触发404跳转逻辑。

问题原因 #

执行createView Mutation后直接调用setViewId更新URL跳转，此时缓存中的show数据还未同步后端返回的新view，组件重新渲染时用旧的show.views列表查找新view ID，自然匹配失败，触发404。

解决方案 #

方案1：在Mutation中手动更新缓存（推荐，以Apollo Client为例） #

通过Mutation的update函数直接修改对应show的缓存数据，确保缓存与后端数据一致后再执行跳转。

修改CreateViewWizard中的Mutation调用：

const { data } = await createView({
  variables: { layoutId, name, showId: show.id },
  update: (cache, { data: mutationData }) => {
    // 读取缓存中已有的show数据
    const existingShow = cache.readQuery({
      query: /* 替换为你的获取show的Query */,
      variables: { id: show.id } // 匹配Query的变量参数
    });
    
    if (existingShow && mutationData?.createView?.view) {
      // 将新view添加到show的views列表
      const updatedShow = {
        ...existingShow,
        show: {
          ...existingShow.show,
          views: [...existingShow.show.views, mutationData.createView.view]
        }
      };
      
      // 更新缓存
      cache.writeQuery({
        query: /* 替换为你的获取show的Query */,
        variables: { id: show.id },
        data: updatedShow
      });
    }
  }
});

if (data?.createView?.view != null) setViewId(data.createView.view.id);

方案2：等待缓存同步后再跳转 #

调用refetch重新获取show数据，确保缓存更新完成后再执行跳转：

// 在CreateViewWizard组件中，获取show的useQuery实例
const { refetch } = useQuery(/* 替换为你的获取show的Query */, { variables: { id: show.id } });

// 修改按钮点击逻辑
const { data } = await createView({ variables: { layoutId, name, showId: show.id } });
if (data?.createView?.view != null) {
  // 重新拉取show数据，强制缓存更新
  await refetch();
  // 缓存更新后再跳转
  setViewId(data.createView.view.id);
}

方案3：临时兼容新创建的view数据 #

在主组件的view查找逻辑中，优先使用Mutation返回的新view数据，避免因缓存未更新导致的404：

// 从props或状态中传入刚创建的view数据
const newlyCreatedView = props.newlyCreatedView;

// 先从show.views查找，找不到则检查是否是刚创建的view
let view = show.views.find(({ id }) => id === viewId);
if (!view && newlyCreatedView?.id === viewId) {
  view = newlyCreatedView;
}

if (view == null) return <Navigate to={route('/not-found')} replace />;

关键注意点 #

• Mutation执行后，缓存不会自动更新关联的Query数据，必须手动处理（除非使用cache-and-network查询策略，但会增加额外请求）
• 跳转时机必须在缓存数据更新完成之后，否则组件会基于旧数据渲染
• 页面重载后缓存清空，首次操作时缓存完全依赖实时请求，更易出现时序匹配问题

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