Check if refetch was done manually

[moaazassali]

I want to show a loading skeleton if the user manually pressed a button which runs query.refetch(). I am aware that isRefetching can be used, but this flag is also true for other refetches on window focus for example, and I don't to show the loading skeleton on refetches that happen on window focus.

The motivation behind this is that a refresh button press from a UX perspective should have a loading indicator, but a refetch on window focus shouldn't show the same loading indicator. This is especially the cases for when the user switches back and forth to the webapp like when copying data to an excel sheet. A manual refresh would show the same loading skeleton as a page refresh for example, while a refetch on window focus would have a small non-blocking loading indicator or nothing at all, which is why it is essential to be able to distinguish between manual and automatic refetches.

I can solve this by setting my own isManuallyRefetching flag in a global store which is set to true when I call query.refetch(). Then, I can use useEffect with isRefetching dependency such that it sets isManuallyRefetching to false when it becomes false as well.

However, since I am using the same query in multiple components, this will quickly become messy and I am wondering if it is possible to check if a manual refetch happened with react query only. Or maybe I can add an extension method like query.manuallyRefetch() for any arbitrary query? But I am not sure how to do that.

[TkDodo]

we don't distinguish between kinds of fetches - a query doesn't know what initiated the fetch. So yes, you'd need to do this in user-land.