invaliateQueries race condition with refetchOnWindowFocus

[SevenOutman]

Hi folks, I'm building this list view where user can delete an item from the list by clicking on an "Delete" button. The list data is fetched with useQuery and deletion is performed via useMutation. When deletion succeeds an invalidateQueries is invoked to refresh the list.

const listQuery = useQuery(['todos', filters]);

const deleteTodo = useMutation((id) => api.deleteTodo(id), {
  onSuccess() {
    queryClient.invalidateQueries(['todos'])
  }
})

Everything works as expected except for an edge case:

1. User clicks outside of the window, resulting in window losing focus
2. User clicks right on the "Delete" button, resulting in two actions triggered in following order:

• The refetch of listQuery due to refetchOnWindowFocus
• The deleteTodo mutation

3. If the refetch happened to respond slow, and the deletion responds fast, the then-invoked invalidateQueries would not send another refetch. And the list data ended up stale (refetch was send before deletion).

Having no idea how to get around this. Any advice?

[TkDodo]

the then-invoked invalidateQueries would not send another refetch.

it does since v4. An explicit call to invalidateQueries() will cancel currently running requests and start a new one, to stop this exact issue.

If you don't want that, you can call invalidateQueries(['todos'], { cancelRefetch: false }). If you are on v3, you can explicitly pass cancelRefetch: true, because there, the defaults were reversed:

https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-4#consistent-behavior-for-cancelrefetch

[SevenOutman]

Setting cancelRefetch: true works. Thanks!

BTW, would there be a way to override the v3 defaults in all places, considering default cancelRefetch: false is corrected in subsequent majors?

[TkDodo]

You have to pass it manually or upgrade to v4

[SevenOutman]

I see. Thanks!