Deduplicate requests

[coryhouse]

swr deduplicates requests. See dedupingInterval under options. Does react-query do this?

[tannerlinsley]

React Query does this automatically by tracking and sharing promises via the query key. So if 3 requests to fetch the same query are made close to each other, the first will actually fire, create a promise, and the next two will use the promise created by the first. One request, one promise, three promise resolutions.

[coryhouse]

Gotcha. So there's no way to specify a window for deduping, correct? Thanks for the quick reply!

[jacobgoh101]

Does the same deduplication apply to mutation too?

[TkDodo]

I don't think it does. mutations have side-effects on the server, they are not idempotent, so we cannot do as many optimization as with "pure" GET requests.

[asktree]

what does "close to eachother" mean precisely here, and do we have control over it?

[TkDodo]

made while a request for a specific key is already in-flight.

[tannerlinsley]

If you’re referring to a delay *after* the request finishes, no that’s not a feature. In our findings, we couldn’t identify a use case for it since it can easily result in expecting to see fresh data but getting outdated data instead. Together with staleTime and the optional refetchOnMount options, you can achieve more reliable results. That said, I could be swayed to add a delay option if a decent use case is presented.

…

On Jun 23, 2020, 7:46 PM -0600, Cory House ***@***.***>, wrote: Gotcha. So there's no way to specify a window for deduping, correct? Thanks for the quick reply! — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[coryhouse]

Ah, gotcha. I was referring to this scenario: I'd like to avoid making duplicate calls within x seconds. I agree that sounds possible with staleTime config. Thanks Tanner!

[dodicandra]

continuing this discussion, does the deduping feature not work when the refetch is run?

[je00037]

Hi @tannerlinsley @TkDodo I have a question on this relating to refetches.

Our use case is within React Native with React Navigation, and we want to refetch certain queries when a screen returns to focus after being overlaid by a modal containing a web/non-native journey. Inside that web journey the user could modify something about their data, and therefore we want to ensure that when they're finished inside that modal journey and they return to the screen, that we're displaying the latest data in the app. We're using an onFocusEffect with refetch to achieve this.

The de-duplication topic came up in regard to preventing a user potentially spamming the server with refetch requests by repeatedly causing the screen to come in and out of focus - but not quickly enough to be caught by the promise-based deduplication that you describe. Since refetch bypasses the staleTime config (I think?), we were hoping there was a config option much like SWRs to specify a deduplication interval, where the same query-key cannot be fetched within a given interval, say 5 seconds.

Any thoughts would be greatly appreciated 🙏

[TkDodo]

Inside that web journey the user could modify something about their data, and therefore we want to ensure that when they're finished inside that modal journey and they return to the screen, that we're displaying the latest data in the app

I would invalidate when the user confirms their choice, or, if there is no Apply button, in the event handler where they make the selection that changes the data. using a focusEvent for this doesn't feel quite right.

Since refetch bypasses the staleTime config (I think?)

yes, it does. You can use queryClient.fetchQuery and pass a staleTime to it to make it respect staleTime or fetch if data is older.

[je00037]

Unfortunately and without going into deep and boring detail, those two options you mention, whilst definitely preferable, aren't available to us with how our app works. The best option we have is to use the focus event as a proxy assumption that something changed... not ideal, for sure.

Thanks for the tip using queryClient.fetchQuery with a staleTime, I think that would work for us 👍 And thanks for the quick reply.

[allisonadam81]

I had another question off of this - I built a hook pretty well mimics the default behavior of react query in the browser for my react native application. I check for stale time inside of a focus listener, etc. But then I call refetch in order to refetch the query if it is stale and enabled.

Does refetch follow the same deduping principles? So if I have a header that's calling useQuery with a query key of ['user', id] to get some user data and display the name, and then the body of the page also calls useQuery with the same key to display some other user data in the object, then on return to the page refetch is called, do these 2 calls to refetch calls to the same key also naturally de-dup themselves? Or are these seen by React Query as separate manual refreshes of the data, and therefore duplicate the api call?

[jgarplind]

Does refetch follow the same deduping principles?

According to bottom of https://tanstack.com/query/latest/docs/framework/react/reference/useQuery

cancelRefetch?: boolean
Defaults to true
Per default, a currently running request will be cancelled before a new request is made