打开下拉时的React使用Query多次称为多次

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>
  );
}

下拉.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-quct-quxt-quxtxd.stackblitz.io

在控制台中，您会看到每次打开下拉列表时，都会调用usequery。

Stackblitz编辑器URL：

作为避免这种情况的替代方法，我可以使用传统的使用效率进行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 （建议）。