Can I invalidate query on window focus instead of refreshing with react-query?

[ronny1020]

Hi, I have a query about a list of options on a modal like this. Most of the time the modal is not opened.

export function useOptionsQuery() {
  return useQuery({
    placeholderData: [],
    queryFn: fetchOprions,
    queryKey: [options],
    refetchOnMount: true,
    refetchOnWindowFocus: 'always',
    staleTime: Infinity,
  });
}

I would like it to keep fresh if the user still uses the window but is invalidated after focusing.
However, if I set the refetchOnWindowFocus to always, the data is updating no matter if the modal is open. I don't want it to fetch data if the data is not mounted.
How can I invalidate a query on the window focus?

[87xie]

Does this work for you? This ensures it refetches the data when the modal is open and the window regains focus.

export function useOptionsQuery(isModalOpen: boolean) {
  return useQuery({
    // ...
    refetchOnWindowFocus: isModalOpen ? 'always' : false,
  });
}

[ronny1020]

Thanks, this walkaround should work. However, I wouldn't like to add a param like this or I will put it to enabled.

I prefer not to expend too much extra effort to check if the data is mounted.