React useQuery在打开下拉菜单时多次调用

Question

我正在使用"react-query"从组件中调用API。为了回答这个问题，我从API返回一个模拟响应。

每次打开下拉菜单时，都会调用useQuery函数，然后调用模拟API。

App.js

import React from 'react';
import './style.css';
import { QueryClient, QueryClientProvider } from 'react-query';
import { DropDown } from './Dropdown.js';
const queryClient = new QueryClient();
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<DropDown />
</div>
</QueryClientProvider>
);
}

Dropdown.js

import React from 'react';
import { useQuery } from 'react-query';
export const DropDown = () => {
console.log('DropDown re-rendered');
const { data, isLoading, isError } = useQuery('API', () => {
return new Promise((resolve, reject) => {
console.log('API called');
resolve(['mockData']);
});
});
return (
<>
<select>
<option> 1 </option>
<option> 2 </option>
</select>
</>
);
};

您可以在这里找到演示:https://react-quxtxd.stackblitz.io

在控制台中，您将看到每次打开下拉菜单时，都会调用useQuery。

Stackblitz编辑器url: https://stackblitz.com/edit/react-quxtxd?file=src/Dropdown.js

作为避免这种情况的替代方法，我可以使用传统的useEffect来进行API调用，但我正在考虑利用useQuery提供的缓存优势，但由于这种"重新渲染"，我被卡住了。问题。

有什么建议/修改吗?

Answer 1

这对我有用

{ refetchOnWindowFocus: false }

用法:

const { data, status } = useQuery("users", fetchUsers, { 
refetchOnWindowFocus: false 
});

如果

---

>所有

您的查询需要此配置。最好将其添加到queryClient

的defaultOptions中。

// App.tsx
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
});
<QueryClientProvider client={queryClient}>
...
</QueryClientProvider>

Answer 2

似乎原来的stackblitz已经被修复，所以这个问题不再是可重复的。为后代:

你可能见过由于聚焦窗口而导致的后台重取。这是因为staleTime默认为0,refetchOnWindowFocus默认为true。您可以关闭标志，或设置更高的staleTime(推荐)。