React Query - refetch on window focus but not otherwise?

In React Query, we can leverage the built-in configuration options to refetch data when the window gains focus. This feature is highly useful, especially when building responsive applications that require real-time data updates.

To implement this feature, enable data refetching when the window gains focus by setting the refetchOnWindowFocus option to true when using the useQuery hook. By default, this option is enabled. Here's a basic example of how to apply this setting in actual code:

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  // Ensure data is refetched when the window gains focus
  });

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

In this example, when the user switches to another tab and then returns to the tab containing the Projects component, useQuery triggers the fetchProjects function to fetch the latest project data.

Additionally, React Query provides other related configuration options, such as refetchInterval and refetchIntervalInBackground, which help developers control data update frequency based on the application's state.

By precisely configuring these options, you can ensure real-time data accuracy, thereby enhancing the user experience.