How ReactQuery ignores stale responses?

[MatriXiao88]

// queryFn will take 1000ms+ to response
const {refetch} = useQuery('test', queryFn, {
  onSuccess: () => {
    console.log('111')
  }
})

When I call the refetch function twice in a short period time, I find the text "111" appears only once.

I wondering how ReactQuery ignores stale responses. Could you show me the relevant code?

[louis-young]

Hi 👋

I think Tanner has answered this in another discussion here.

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.

If you're interested in looking at how this is implemented internally, TanStack Query is open source; you can look at the source code on GitHub.

Hopefully this helps 🙂