React Query 预加载数据后怎么避免组件重复请求？

夏侯威威提问于 2026-02-23 22:22:20 阅读 19

优化

我在用 React Query 做页面切换前的数据预加载，但发现进入页面后还是会触发一次新的请求，明明之前已经 preload 过了。

我试过在路由跳转前调用 queryClient.prefetchQuery('user', fetchUser)，控制台也看到只发了一次请求，可组件里用 useQuery('user') 时还是重新 fetch 了，缓存好像没生效？

相关代码大概是这样的：

const handleNavigate = async () => {
  await queryClient.prefetchQuery('user', () => fetch('/api/user'));
  navigate('/profile');
};

// 在 Profile 组件中
const { data } = useQuery('user', () => fetch('/api/user'));

组件设计

我来解答赞 1 收藏

反馈

1 条解答

Mr.雨涵 Lv1

试试这个，prefetchQuery 要传入正确的 queryKey 和 queryFn，而且得用 queryKey 保持一致，你那例子中 prefetchQuery('user') 和 useQuery('user') 的 queryFn 没共享，得改成：

const handleNavigate = async () => {

  await queryClient.prefetchQuery({

    queryKey: ['user'],

    queryFn: () => fetch('/api/user').then(res => res.json())

  });

  navigate('/profile');

};



// Profile 组件里保持一致

const { data } = useQuery({

  queryKey: ['user'],

  queryFn: () => fetch('/api/user').then(res => res.json())

});

关键点是：prefetch 和 useQuery 的 queryKey 必须完全一样（包括顺序），而且 queryFn 要能被 React Query 缓存住（别每次 render 都新建函数）。

2026-02-23 23:01