Globally modify the response

[akullpp]

I try to modify all responses made globally:

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onSuccess(data, query) {
      const modifiedData = doSomething(data)
      query.setData(modifiedData)
      return clean(modifiedData)
    }
})

Unfortunately the data hits the component unmodified. Any ideas?

[TkDodo]

1. onSuccess doesn't return anything, same as onClick of a button doesn't return anything. It's a handler for side-effects.

2. I'm surprised that this doesn't cause an infinite loop because calling query.setData in onSuccess will trigger onSuccess again (because you have successfully set data).

3. What are you trying to achieve ?

[akullpp]

Oh, I thought so. Basically, I wanted to do something like an interceptor (like in axios) where I transform the response, e.g.

    onSuccess(data, query) {
      const { user } = data
      return { ...user, name: `${user.firstname}${user.lastname}` }
}

[TkDodo]

https://tkdodo.eu/blog/react-query-data-transformations

[akullpp]

Unfortunately not globally possible I guess with react-query but with the fetcher, e.g. axios interceptor