React Query中useQuery未使用缓存重复发起请求是什么原因？

问题原因 #

你的写法存在两处会触发重复请求的问题：

• 每次组件渲染时，getMyStuffQuery().queryFn都会生成一个全新的函数引用，React Query会将queryFn的引用变更作为需要重新执行请求的判断依据之一，因此每次渲染都会触发接口调用。
• React Query默认staleTime配置为0，也就是说请求返回的数据会立刻被标记为“过时”，此时只要有组件触发useQuery执行，就会自动发起后台刷新请求，看起来就是每次渲染都重复调用接口。

修复方案 #

方案1：抽离稳定的queryFn引用 #

不要每次调用函数生成新的queryFn，直接导出固定的请求方法即可：

// 封装层修改
export const getMyStuffQueryFn = () => makeSomeApiCall();

// 组件内使用
useQuery("myStuff", getMyStuffQueryFn);

方案2：缓存query配置 #

如果一定要保留getMyStuffQuery的封装形式，在组件内用useMemo缓存调用结果，避免每次渲染生成新的引用：

// 组件内
const myStuffQuery = useMemo(() => getMyStuffQuery(), []);
useQuery("myStuff", myStuffQuery.queryFn);

方案3：设置合理的staleTime #

根据业务场景配置数据过时时间，在过时时间范围内不会主动触发重新请求：

// 示例：配置数据5分钟内不过时
useQuery("myStuff", getMyStuffQueryFn, {
  staleTime: 5 * 60 * 1000
});

如果你使用的是React Query v4及以上版本，更推荐用官方提供的queryOptions工具函数封装查询配置，可以从根源上避免引用变化带来的重复请求问题。

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