React Query - refetch on window focus but not otherwise?

回答：

在React Query中，我们可以利用库自带的配置选项来实现在窗口重新获得焦点时进行数据的重新获取（refetch）。这个特性非常有用，特别是在构建需要实时数据更新的响应式应用程序时。

要实现这一功能，您可以在使用useQuery钩子时，通过设置refetchOnWindowFocus选项为true来启用窗口聚焦时的数据重新获取。默认情况下，这个选项是开启的。下面是如何在实际代码中应用这一设置的一个基本例子：

javascript
import { useQuery } from 'react-query';

function fetchProjects() {
  return fetch('https://api.example.com/projects')
    .then(res => res.json());
}

function Projects() {
  const { data, status } = useQuery('projects', fetchProjects, {
    refetchOnWindowFocus: true  // 确保在窗口聚焦时重新获取数据
  });

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'error') {
    return <div>Error fetching data</div>;
  }

  return (
    <div>
      {data.map(project => (
        <p key={project.id}>{project.name}</p>
      ))}
    </div>
  );
}

在这个例子中，当用户切换到其他标签页然后重新回到包含我们Projects组件的标签页时，useQuery将触发fetchProjects函数，从而获取最新的项目数据。

此外，React Query也提供了其他相关的配置选项，例如refetchInterval和refetchIntervalInBackground，这些可以帮助开发者在应用处于不同状态时控制数据的更新频率。

通过精确地配置这些选项，您可以确保应用数据的实时性和准确性，从而提升用户体验。

在React Query中，我们可以利用库自带的配置选项来实现在窗口重新获得焦点时进行数据的重新获取（refetch）。这个特性非常有用，特别是在构建需要实时数据更新的响应式应用程序时。

要实现这一功能，您可以在使用 useQuery钩子时，通过设置 refetchOnWindowFocus选项为 true来启用窗口聚焦时的数据重新获取。默认情况下，这个选项是开启的。下面是如何在实际代码中应用这一设置的一个基本例子：

javascript
import { useQuery } from 'react-query';

function fetchProjects() {
  return fetch('https://api.example.com/projects')
    .then(res => res.json());
}

function Projects() {
  const { data, status } = useQuery('projects', fetchProjects, {
    refetchOnWindowFocus: true  // 确保在窗口聚焦时重新获取数据
  });

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'error') {
    return <div>Error fetching data</div>;
  }

  return (
    <div>
      {data.map(project => (
        <p key={project.id}>{project.name}</p>
      ))}
    </div>
  );
}

在这个例子中，当用户切换到其他标签页然后重新回到包含我们 Projects组件的标签页时，useQuery将触发 fetchProjects函数，从而获取最新的项目数据。

此外，React Query也提供了其他相关的配置选项，例如 refetchInterval和 refetchIntervalInBackground，这些可以帮助开发者在应用处于不同状态时控制数据的更新频率。

通过精确地配置这些选项，您可以确保应用数据的实时性和准确性，从而提升用户体验。