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 26, 2021
1 parent 6a6b195 commit a175b27
Show file tree
Hide file tree
Showing 4 changed files with 499 additions and 54 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
57 changes: 3 additions & 54 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 @@ -166,7 +162,7 @@ This can be useful for scenarios where you want to have particularly different b
- One-off queries that use different request handling, such as automatic re-tries
- One-off queries that use different error handling behaviour
- Performing multiple requests with a single query ([example](#performing-multiple-requests-with-a-single-query))
- Leveraging invalidation behaviour with no relevant query ([example](#no-op-queryfn))
- Leveraging invalidation behaviour with no relevant query ([example](#using-a-no-op-queryfn))
- Using [Streaming Updates](./streaming-updates) with no relevant initial request ([example](#streaming-data-with-no-initial-request))

See also [`queryFn API Reference`](../api/createApi.mdx#queryfn) for the type signature and available options.
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 a175b27

Please sign in to comment.