How can I access the queryClient from outside the context?

[jmbldwn]

In my app, I have a socket.io client that receives messages that indicate updates to server data.

When I receive a message, I need to either invalidate the cache for related queries, or better yet, update the cache directly with data received via the socket.

However, in my socket client, I don't see how I can access queryClient to trigger the cache update/invalidate.

Is there a way to do this?

[jmbldwn]

I'll add that I can declare the queryClient in App.js as

window.queryClient = new QueryClient()

And use window.queryClient in my socket.io client, but this feels like a bit of a hack. Would love a more "front door" solution.

[TkDodo]

you create a queryClient somewhere, so you can most certainly export and import it:

- const queryClient = new QueryClient()
+ export const queryClient = new QueryClient()

there are reasons why this can be troublesome in some cases, which I have listed here:

• https://tkdodo.eu/blog/react-query-fa-qs#why-should-i-usequeryclient

So I think you can also setup the socket io client in the react app lifecycle to gain access to the queryClient with useQueryClient. But you don't have to - it's just about weighing tradeoffs.

[rickvian]

awesome!