middlewares

[magom001]

Hi!

Slightly related to #116

What do you think about adding middleware functionality to react-query? Use case:

I would like to preprocess all error messages before they reach onError callbacks. I currently achieved the desired result by use setLogger and mutating the error object, but I reckon it is not meant to be used in this manner.

[TkDodo]

I would do this in the queryFn. The failed Promise that it returns will result in an error, so any pre-processing can be done there.

[TkDodo]

so instead of calling fetch or axios directly, you make a wrapper myFetch or myAxios that catches errors and transforms them. You call that function from all your useQuery, that seems like a middleware I guess?

[magom001]

I guess this is one way to go about this problem.

I ended up writing my own useMutation (useCustomMutation). The only problem is that certain functions are private withing react-query and I had to copy paste those.

[TkDodo]

which ones?

[magom001]

those that process the arguments and construct mutation options object.

[TkDodo]

okay, they are basically just to make the overloads work so that you can call useMutation and useQuery with multiple arguments / one argument object. If you choose one way for your app, you might not need this :)

[bluprince13]

I think this would be a great feature too. My use case - I currently intercept errors to show notifications on the UI. I don't want to repeat this logic for every query.

I currently achieved the desired result by use setLogger and mutating the error object

@magom001 - did setLogger work well for you? Are you able to share an example if this is open source?

[magom001]

I did not go with the logger solution. Instead I wrapped useMutation with a custom hook.

[TkDodo]

My use case - I currently intercept errors to show notifications on the UI. I don't want to repeat this logic for every query.

The best way to do this is with the global onError callback on the queryCache / mutationCache. You can read about it here:
https://react-query.tanstack.com/reference/QueryCache#global-callbacks

[bluprince13]

That works. Thank you!

For anyone else who stumbles across this. The queryCache you create can be passed to queryClient which takes it as an optional parameter.