What's the best approach for mixing API responses into one cache?

[jayporta]

The problem

I have a chat app that fetches pre-existing messages via Rest API, and a web socket which receives only new messages since landing on the page. When posting a new message, the new message is automatically received via web socket, not via Rest API refetch.

We also have a deletion function and a form of editing, which could/should in fact trigger a refetch. But by this time the message you're deleting or editing might have been from the web socket, not the Rest API.

The question

Is it a proper use of react-query to take web socket messages and add them to the cache created by useQuery via setQuery so that there's a single cache, or should the web socket messages and Rest API messages remain unmodified in their own respective caches while creating a third cache (in this case, state in a Context hook) for the combined data?

[TkDodo]

It's perfectly fine to manipulate the react-query cache by something you get via the websocket. After all, it should be the same as your current server state. This is similar to updates from mutation respsonses.

Another approach is to send "commands" via the websocket that instructs the queryClient to invalidate and thus refetch certain queries if something changes. I've written about that here: https://tkdodo.eu/blog/using-web-sockets-with-react-query

[jayporta]

Thanks!