[React Native] Refetch on focus screen only if data is really stale

[andre-krueger]

I'm currently using this function (modified from official docs) to refetch the data on screen focus, but only when staleTime is exhausted.

export function useRefreshOnFocus() {
  const firstTimeRef = React.useRef(true);

  useFocusEffect(
    React.useCallback(() => {
      if (firstTimeRef.current) {
        firstTimeRef.current = false;
        return;
      }

      focusManager.setFocused(true);
    }, [])
  );
}

When I use refetch instead of focusManager.setFocused, the query is always rerun, even if staleTime is not exhausted yet.
However, for the query QUERY_THAT_NEEDS_TO_BE_REFETCHED I still want a background->foreground change to refetch it even if the staleTime is not exhausted yet, so I have to use this:

function onAppStateChange(status: AppStateStatus) {
  if (Platform.OS !== 'web') {
    focusManager.setFocused(status === 'active');
    if (status === 'active') {
      queryClient.invalidateQueries(['QUERY_THAT_NEEDS_TO_BE_REFETCHED']);
    }
  }
}

It works fine with that code, but is there any more idiomatic way to do that?

[TkDodo]

queryClient.refetchQueries respects staleTime if you pass the stale:true filter.

[andre-krueger]

Great, that works.
Thanks!

[andre-krueger]

Quick question: What does refetch({stale}) do? It doesn't seem to do anything and it is also not listed in the docs.

[TkDodo]

Please see: https://tanstack.com/query/v4/docs/guides/filters