Skip to content

Commit

Permalink
Docs - RTK: add Usage with Typescript page
Browse files Browse the repository at this point in the history
  • Loading branch information
Shrugsy committed May 25, 2021
1 parent b832b3a commit da6c79e
Show file tree
Hide file tree
Showing 4 changed files with 498 additions and 53 deletions.
2 changes: 2 additions & 0 deletions docs/rtk-query/api/created-api/hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,8 @@ type UseQueryResult<T> = {
[summary](docblock://query/core/buildSelectors.ts?token=skipToken)
See also [Skipping queries with TypeScript using `skipToken`](../../usage/usage-with-typescript.mdx#skipping-queries-with-typescript-using-skiptoken)
## `useMutation`
#### Signature
Expand Down
55 changes: 2 additions & 53 deletions docs/rtk-query/usage/customizing-queries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,6 @@ const customBaseQuery = (
}
```

<!-- TODO: move this to a 'usage with typescript' page instead (and cover in more detail)-->

The type for `data` is dictated based on the types specified per endpoint (both queries & mutations), while the type for `error` is dictated by the `baseQuery` function used.

:::note
This format is required so that RTK Query can infer the return types for your responses.
:::
Expand Down Expand Up @@ -450,6 +446,8 @@ In such a scenario, the return value would look like so:
return { error: YourError, meta: YourMeta }
```
<!-- TODO: re-write below with a more realistic example -->
```ts title="baseQuery example with meta information"
// file: idGenerator.ts noEmit
export declare const uuid: () => string
Expand Down Expand Up @@ -771,52 +769,3 @@ const api = createApi({
}),
})
```
### Excluding baseQuery for all endpoints
<!-- TODO: move this to a 'usage with typescript' page instead-->
For typescript users, the error type that `queryFn` must return is dictated by the provided `baseQuery` function. For users who wish to _only_ use `queryFn` for each endpoint and not include a `baseQuery` at all, RTK Query provides a `fakeBaseQuery` function that can be used to easily specify the error type each `queryFn` should return.
```ts title="Excluding baseQuery for all endpoints"
import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query'

type CustomErrorType = { type: 'too cold' | 'too hot' }

const api = createApi({
// highlight-start
baseQuery: fakeBaseQuery<CustomErrorType>(),
// highlight-end
endpoints: (build) => ({
eatPorridge: build.query<'just right', 1 | 2 | 3>({
// highlight-start
queryFn(seat) {
if (seat === 1) {
return { error: { type: 'too cold' } }
}

if (seat === 2) {
return { error: { type: 'too hot' } }
}

return { data: 'just right' }
},
// highlight-end
}),
microwaveHotPocket: build.query<'delicious!', number>({
// highlight-start
queryFn(duration) {
if (duration < 110) {
return { error: { type: 'too cold' } }
}
if (duration > 140) {
return { error: { type: 'too hot' } }
}

return { data: 'delicious!' }
},
// highlight-end
}),
}),
})
```
Loading

0 comments on commit da6c79e

Please sign in to comment.