Refetch on window focus

[tylerzey]

Libraries such as SWR and React Query support opting into queries re-fetching upon the window being re-focused.

They allow to you configure this behavior on a per-query or on a global level. It seems quite popular and might be a feature Apollo would like to support.

Example from React Queries docs

useQuery({
  refetchOnWindowFocus: false,
})

A previous issue (feature request) had a lot of comments on it asking for Apollo to support the feature.

To implement this feature in Apollo current, you have to do the following.

On a global level:

const apolloClient = new ApolloClient();

window.addEventListener('focus', () => {
  apolloClient.refetchQueries({ include: 'active' });
});

On a per-query level:

https://github.com/apollographql/apollo-feature-requests/issues/247#issuecomment-1063411159

Specifically:

  const { isWindowFocused } = useWindowFocus();

  useEffect(() => {
    if (!isWindowFocused) {
      stopPolling();
    } else {
      // Refetch data immediately when the window is refocused.
      refetch?.();
      startPolling(pollInterval);
    }
  }, [isWindowFocused, pollInterval, refetch, startPolling, stopPolling]);

The use case seems fairly common and might be something to consider bringing into Apollo as a feature.

[nwazuo]

+1 for this

[shyamayadav154]

+1

[optimistic-updt]

+1

[rajat-sr]

+1

[stanislavyv]

+1

[man-trackunit]

+2

[KMKoushik]

This is how I do it right now. this code will be added globally where we include apollo provider

useEffect(() => {
    const refetchQueries = () => {
      if (document.visibilityState === "visible") {
        client.refetchQueries({ include: "active" });
      }
    };

    window.addEventListener("visibilitychange", refetchQueries);

    return () => {
      window.removeEventListener("visibilitychange", refetchQueries);
    };
  }, []);