Skip to content

Commit

Permalink
Merge pull request #1573 from Shrugsy/docs/document-arg-in-transformR…
Browse files Browse the repository at this point in the history
…esponse
  • Loading branch information
markerikson authored Oct 5, 2021
2 parents 43bba18 + 8359318 commit cda3258
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 10 deletions.
9 changes: 6 additions & 3 deletions docs/rtk-query/api/createApi.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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`
Expand Down
28 changes: 24 additions & 4 deletions docs/rtk-query/usage/customizing-queries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/rtk-query/usage/mutations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
8 changes: 6 additions & 2 deletions docs/rtk-query/usage/queries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit cda3258

Please sign in to comment.