React Tanstack Query useInfiniteQuery页面切换无API请求问题排查

核心原因 #

• QueryKey 未包含唯一标识参数：React Query 完全依赖 queryKey 区分不同缓存数据。如果 useListProducts 的 queryKey 没加入路由参数 uid，或者 useListSavedProducts 的 queryKey 没加入会话中的 uid，页面切换时 QueryKey 不变，React Query 会直接复用旧缓存，不会发起新请求。
• 自定义钩子依赖传递缺失：封装 useInfiniteQuery 时，未将 uid 作为关键依赖传入，导致 uid 变化时查询配置未更新，无法触发重新请求。
• 路由切换时组件未重渲染：如果两个页面复用同一组件但未区分 QueryKey，React Query 无法感知数据源变化，不会重新执行查询。

修复方案 #

1. 给 QueryKey 加入关键依赖 #

修改自定义钩子的 queryKey，把影响数据的唯一参数纳入其中：

// useListProducts 钩子（基于路由参数 uid）
function useListProducts(uid) {
  return useInfiniteQuery({
    queryKey: ['products', uid], // 将路由uid作为QueryKey的一部分
    queryFn: ({ pageParam = 0 }) => listProducts(uid, pageParam),
    // 其他分页相关配置...
  });
}

// useListSavedProducts 钩子（基于会话 uid）
function useListSavedProducts(sessionUid) {
  return useInfiniteQuery({
    queryKey: ['savedProducts', sessionUid], // 将会话uid作为QueryKey的一部分
    queryFn: ({ pageParam = 0 }) => listSavedProducts(sessionUid, pageParam),
    // 其他分页相关配置...
  });
}

2. 确保钩子依赖正确传递 #

在组件中调用钩子时，传入实时的 uid 参数：

// Products 页面组件（路由参数场景）
const { uid } = useParams();
const { data, fetchNextPage } = useListProducts(uid);

// SavedProducts 页面组件（会话 uid 场景）
const { sessionUid } = useSession(); // 假设从会话上下文获取uid
const { data, fetchNextPage } = useListSavedProducts(sessionUid);

当 uid 变化（路由切换或会话更新）时，QueryKey 会同步更新，触发 React Query 重新发起请求。

3. 强制组件在路由切换时重渲染 #

如果两个页面复用同一组件，给组件添加唯一 key 属性，让 React 在路由切换时重新创建组件实例：

<Routes>
  <Route path="/profile/products/:uid" element={<ProductList key="products" />} />
  <Route path="/profile/savedProducts" element={<ProductList key="saved" />} />
</Routes>

通过 key 区分不同页面的组件实例，确保钩子重新执行。

4. 验证 enabled 配置（可选） #

如果钩子中设置了 enabled 选项，确保它依赖 uid 的存在，避免 uid 未就绪时不触发请求：

function useListProducts(uid) {
  return useInfiniteQuery({
    queryKey: ['products', uid],
    queryFn: ({ pageParam = 0 }) => listProducts(uid, pageParam),
    enabled: !!uid, // 仅当uid存在时发起请求
  });
}

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