[v3.3.0] - How to get QueryClient in reusable file of useMutations?

[changyeamoon]

I've made reusable functions wrapping the react-query mutation query where I could easily import queryCache and create onMutate, onSuccess, etc logic.

Now that the queryClient needs to be instantiated with a hook, we get the pesky React Hook "useQueryClient" cannot be called at the top level.

The only thing I can think of is to pass the queryClient down to my functions or import the queryClient that was instantiated for the Provider.

I hope this CodeSandbox can demonstrate what i mean - https://codesandbox.io/s/usemutation-nitpik-12dq3

Am I nitpicky to think this is kind of a hassle? Maybe we can pass the queryClient down to the useMutation option parameters? Maybe it's a bad pattern to create reusable options in your reusable useMutations functions?

[tannerlinsley]

Before you would have had to at least import the built-in query cache from react-query, so you should really just be swapping that import with a different import. And yes, that's the intended usage: If you are in react-land, useQueryClient, and if you are in a hoisted non-react scope, just import queryClient from './myQueryClient'.

Also, a pattern that I use often is to essentially have a custom hook for every crud operation I can do. That's where I compose everything together.

[changyeamoon]

okay sounds good, thanks for validating :)

[changyeamoon]

@tannerlinsley just to be clear, this is the recommended way to do that? - https://codesandbox.io/s/usemutation-nitpik-12dq3?file=/src/hooks/usePosts.js