[RTK Query] Support a transformRequest function

[huyenltnguyen]

Hi team 👋

I'm wondering if you have considered adding support for a transformRequest function to an endpoint, since we already have transformResponse supported.

Right now I'm transforming the data in the UI component before passing it to a useQuery or useMutation hook, but pre-RTKQ, I was transforming API request and response outside of the UI layer. So I'm wondering if I can keep following this pattern with RTKQ, or if you have any recommendation / best practices for data transformation in general.

[phryneas]

Your endpoint's query function is such a transformRequest function (honestly, that would have been a great name for it). What exactly do you want to do what you could not do there?

[phryneas]

You can use enhanceEndpoints to override a query function - and if you use the callback notation you can even use a reference to the original query function there.

[herbola]

async query function does not seem to work properly

[markerikson]

@herbola : "does not work properly" isn't any kind of feedback we can do anything about :(

If something actually seems broken, please file an issue and include a CodeSandbox that shows what you're trying to do.

[phryneas]

@herbola the query function should be a pure function without any side effects. (And as such, not async.)
It should always make the same request for the same args being passed in.
Otherwise there could be a "need to make another request to the server" without the args changing - and without the args changing, RTK Query can never know that it should make another request.

If you want to do something like this, queryFn is kind of an escape hatch, but generally be aware of the same thing: if the args don't change, RTK Query will likely not make another request again.

[bd-halkoaho]

You can use enhanceEndpoints to override a query function - and if you use the callback notation you can even use a reference to the original query function there.

@phryneas Can you give an example of this? Do you mean a query function or queryFn function? My generated api has query defined, and seems that I can't override that with queryFn, only the generated query gets called. I have not figured out a way to call the query from my generated api after doing my transformations in the query in my enhanceEndpoints. I would hate to have to duplicate urls etc. from the generated api in my enhanceEndpoints.

[Grapedge]

Many times, I want to get the global state from the store as a query parameter, so I usually write some custom hooks to implicitly pass these global states.

function useMyGetXXXQuery(rawQueryArg) {
  const site = useSelector(selectCurrentSite)
  const finalQueryArg = { site, ...queryArg }
  return useGetXXXQuery(finalQueryArg)
}

For this scenario, just my personal thoughts, I think it would be much better if there was a prepareQueryArg:

// getXXX:
builder.query<Result, RawQueryArg>({
  prepareQueryArg: (rawQueryArg, { getState }) => {
    return {
      site: selectCurrentSite(getState() as RootState),
      ...rawArg,
    }
  },
  query: (finalArg) => ({ ... })
})