useInfiniteQuery - Partially updating

[ephys]

Hello!

I am looking into migrating from swr to react-query and, after going through the documentation, there is one feature I would like to verify is possible before I commit to the massive refactor

To give some context, one of our use-cases is a live conversation list sorted by last message.

I'm trying to have a live infinite list, but I can't simply call refetch on all pages as:

• it would be wasteful
• if the cursors used for each page don't update, the returned data would be incorrect given elements can be resorted (if a new message has been sent).

Instead we have a "updatedAfter" parameter on the endpoint to only return the conversations that have been updated after the provided timestamp.

The way I currently think this can be done is by doing the following:

• Use useInfiniteQuery for the infinite list.
• Have a useQuery regularly call the partial update endpoint.
• Store the response from useQuery in queryCache.setQueryData using a key dedicated to partial updates.
  • Subsequent responses would merge with the data that has already been stored in the cache
• Update the timestamp used by useQuery. Note: I don't update the key to not cause an immediate re-render, and not spam the cache.
• During render, merge useInfiniteQuery and queryCache.getQueryData, remove duplicates, & resort.

This all feels very hacky, would such a solution cause subtle bugs?

Would including a native solution for this use case be possible?

[wolverineks]

could you provide an example in codesandbox.io?

[wolverineks]

a good starting point
https://codesandbox.io/s/react-query-starter-8i7vb?file=/src/App.tsx