RTK Query: How to modify query responses with transformResponse

Photo by Lautaro Andreani on Unsplash

This is my note when I learned how to customize raw API responses with the transformResponse.

According to the official document,

Individual endpoints on createApi accept a transformResponse property which allows manipulation of the data returned by a query or mutation before it hits the cache.

FYI: RTK Query has a feature for managing cached data that saves the data in the Redux store as a cache for reuse when another request is made for the same data.

transformResponse

By default, transformResponse receives a baseQuery return value (, and potentially meta and arg) from baseQuery and returns it unchanged without any manipulation

function defaultTransformResponse(
  baseQueryReturnValue: unknown,
  meta: unknown,
  arg: unknown
) {
  return baseQueryReturnValue
}

ref: https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-query-responses-with-transformresponse

You can modify the baseQuery return value within the transformResponse function.

Code Example

Here is my code example:
1) Retrieve Star Wars characters data from the following URL: https://akabab.github.io/starwars-api/api
2) Clean up…