diff --git a/docs/rtk-query/api/createApi.mdx b/docs/rtk-query/api/createApi.mdx index c1df72304a..556c81661f 100644 --- a/docs/rtk-query/api/createApi.mdx +++ b/docs/rtk-query/api/createApi.mdx @@ -143,7 +143,8 @@ export type QueryDefinition< /* transformResponse only available with `query`, not `queryFn` */ transformResponse?( baseQueryReturnValue: BaseQueryResult, - meta: BaseQueryMeta + meta: BaseQueryMeta, + arg: QueryArg ): ResultType | Promise extraOptions?: BaseQueryExtraOptions @@ -210,7 +211,8 @@ export type MutationDefinition< /* transformResponse only available with `query`, not `queryFn` */ transformResponse?( baseQueryReturnValue: BaseQueryResult, - meta: BaseQueryMeta + meta: BaseQueryMeta, + arg: QueryArg ): ResultType | Promise extraOptions?: BaseQueryExtraOptions @@ -405,7 +407,8 @@ In some cases, you may want to manipulate the data returned from a query before See also [Customizing query responses with `transformResponse`](../usage/customizing-queries.mdx#customizing-query-responses-with-transformresponse) ```ts title="Unpack a deeply nested collection" no-transpile -transformResponse: (response) => response.some.deeply.nested.collection +transformResponse: (response, meta, arg) => + response.some.deeply.nested.collection ``` ### `extraOptions` diff --git a/docs/rtk-query/usage/customizing-queries.mdx b/docs/rtk-query/usage/customizing-queries.mdx index 2de507617b..26da5631f2 100644 --- a/docs/rtk-query/usage/customizing-queries.mdx +++ b/docs/rtk-query/usage/customizing-queries.mdx @@ -103,7 +103,11 @@ Individual endpoints on [`createApi`](../api/createApi.mdx) accept a [`transform By default, the payload from the server is returned directly. ```ts -function defaultTransformResponse(baseQueryReturnValue: unknown) { +function defaultTransformResponse( + baseQueryReturnValue: unknown, + meta: unknown, + arg: unknown +) { return baseQueryReturnValue } ``` @@ -111,13 +115,16 @@ function defaultTransformResponse(baseQueryReturnValue: unknown) { To change it, provide a function that looks like: ```ts title="Unpack a deeply nested collection" no-transpile -transformResponse: (response) => response.some.deeply.nested.collection +transformResponse: (response, meta, arg) => + response.some.deeply.nested.collection ``` -`transformResponse` is also called with the `meta` property returned from the `baseQuery`, which can be used while determining the transformed response. The value for `meta` is dependent on the `baseQuery` used. +`transformResponse` is called with the `meta` property returned from the `baseQuery` as it's second +argument, which can be used while determining the transformed response. The value for `meta` is +dependent on the `baseQuery` used. ```ts title="transformResponse meta example" no-transpile -transformResponse: (response: { sideA: Tracks; sideB: Tracks }, meta) => { +transformResponse: (response: { sideA: Tracks; sideB: Tracks }, meta, arg) => { if (meta?.coinFlip === 'heads') { return response.sideA } @@ -125,6 +132,19 @@ transformResponse: (response: { sideA: Tracks; sideB: Tracks }, meta) => { } ``` +`transformResponse` is called with the `arg` property provided to the endpoint as it's third +argument, which can be used while determining the transformed response. The value for `arg` is +dependent on the `endpoint` used, as well as the argument used when calling the query/mutation. + +```ts title="transformResponse arg example" no-transpile +transformResponse: (response: Posts, meta, arg) => { + return { + originalArg: arg, + data: response, + } +} +``` + While there is less need to store the response in a [normalized lookup table](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape) with RTK Query managing caching data, `transformResponse` can be leveraged to do so if desired. ```ts title="Normalize the response data" no-transpile diff --git a/docs/rtk-query/usage/mutations.mdx b/docs/rtk-query/usage/mutations.mdx index 010b58c81b..7fd7d4ffa3 100644 --- a/docs/rtk-query/usage/mutations.mdx +++ b/docs/rtk-query/usage/mutations.mdx @@ -50,7 +50,7 @@ const api = createApi({ body: patch, }), // Pick out data and prevent nested properties in a hook or selector - transformResponse: (response: { data: Post }) => response.data, + transformResponse: (response: { data: Post }, meta, arg) => response.data, invalidatesTags: ['Post'], // onQueryStarted is useful for optimistic updates // The 2nd parameter is the destructured `MutationLifecycleApi` diff --git a/docs/rtk-query/usage/queries.mdx b/docs/rtk-query/usage/queries.mdx index 0448cf667d..7b1cce81be 100644 --- a/docs/rtk-query/usage/queries.mdx +++ b/docs/rtk-query/usage/queries.mdx @@ -57,7 +57,7 @@ const api = createApi({ // note: an optional `queryFn` may be used in place of `query` query: (id) => ({ url: `post/${id}` }), // Pick out data and prevent nested properties in a hook or selector - transformResponse: (response: { data: Post }) => response.data, + transformResponse: (response: { data: Post }, meta, arg) => response.data, providesTags: (result, error, id) => [{ type: 'Post', id }], // The 2nd parameter is the destructured `QueryLifecycleApi` async onQueryStarted( @@ -163,7 +163,11 @@ Here is an example of a `PostDetail` component: ```tsx title="Example" export const PostDetail = ({ id }: { id: string }) => { - const { data: post, isFetching, isLoading } = useGetPostQuery(id, { + const { + data: post, + isFetching, + isLoading, + } = useGetPostQuery(id, { pollingInterval: 3000, refetchOnMountOrArgChange: true, skip: false,