Merge pull request #1573 from Shrugsy/docs/document-arg-in-transformResponse

Author: markerikson

docs/rtk-query/api/createApi.mdx

@@ -143,7 +143,8 @@ export type QueryDefinition<
   /* transformResponse only available with `query`, not `queryFn` */
   transformResponse?(
     baseQueryReturnValue: BaseQueryResult<BaseQuery>,
-    meta: BaseQueryMeta<BaseQuery>
+    meta: BaseQueryMeta<BaseQuery>,
+    arg: QueryArg
   ): ResultType | Promise<ResultType>
 
   extraOptions?: BaseQueryExtraOptions<BaseQuery>
@@ -210,7 +211,8 @@ export type MutationDefinition<
   /* transformResponse only available with `query`, not `queryFn` */
   transformResponse?(
     baseQueryReturnValue: BaseQueryResult<BaseQuery>,
-    meta: BaseQueryMeta<BaseQuery>
+    meta: BaseQueryMeta<BaseQuery>,
+    arg: QueryArg
   ): ResultType | Promise<ResultType>
 
   extraOptions?: BaseQueryExtraOptions<BaseQuery>
@@ -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`

docs/rtk-query/usage/customizing-queries.mdx

@@ -103,28 +103,48 @@ 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
 }
 ```
 
 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
   }
   return response.sideB
 }
 ```
 
+`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

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`

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,