Skip to content

Commit

Permalink
feat: optimize code & doc
Browse files Browse the repository at this point in the history
  • Loading branch information
liaoxuan committed Dec 7, 2023
1 parent 2f0c247 commit 7bd7e17
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 89 deletions.
54 changes: 18 additions & 36 deletions README-zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@
## Installation

```bash
$ npm i react-query-kit@beta
$ npm i react-query-kit
# or
$ yarn add react-query-kit@beta
$ yarn add react-query-kit
```

如果您还在使用 React Query Kit v2? 请在此处查看 v2 文档:https://github.com/liaoliao666/react-query-kit/tree/v2#readme.
Expand Down Expand Up @@ -382,7 +382,7 @@ Returns
```tsx
import { router } from 'react-query-kit'

const posts = router(`posts`, {
const post = router(`post`, {
byId: router.query({
fetcher: (variables: { id: number }) =>
fetch(`/posts/${variables.id}`).then(res => res.json()),
Expand All @@ -406,28 +406,29 @@ const posts = router(`posts`, {
})

// get root key
posts.getKey() // ['posts']
post.getKey() // ['post']

// hooks
posts.byId.useQuery({ variables: { id: 1 } })
posts.byId.useSuspenseQuery({ variables: { id: 1 } })
posts.list.useInfiniteQuery()
posts.list.useSuspenseInfiniteQuery()
posts.add.useMutation()
post.byId.useQuery({ variables: { id: 1 } })
post.byId.useSuspenseQuery({ variables: { id: 1 } })
post.list.useInfiniteQuery()
post.list.useSuspenseInfiniteQuery()
post.add.useMutation()

// expose methods
posts.byId.getKey({ id: 1 }) // ['posts', 'byId', { id: 1 }]
posts.byId.getFetchOptions({ id: 1 })
posts.byId.getOptions({ id: 1 })
posts.byId.fetcher({ id: 1 })
posts.add.getKey() // ['posts', 'add']
posts.add.getOptions()
posts.add.mutationFn({ title: 'title', content: 'content' })
post.byId.getKey({ id: 1 }) // ['post', 'byId', { id: 1 }]
post.byId.getFetchOptions({ id: 1 })
post.byId.getOptions({ id: 1 })
post.byId.fetcher({ id: 1 })
post.add.getKey() // ['post', 'add']
post.add.getOptions()
post.add.mutationFn({ title: 'title', content: 'content' })

// infer types
type Data = inferData<typeof posts.list>
type FnData = inferFnData<typeof posts.list>
type Variables = inferVariables<typeof posts.list>
type Error = inferError<typeof posts.list>
```
## API 文档
Expand Down Expand Up @@ -592,26 +593,6 @@ inferOptions<typeof useProjects> // InfiniteQueryHookOptions<...>

`getFetchOptions` 只会返回必要的选项,而像 `staleTime``retry` 等选项会被忽略

```ts
const useTest1 = createQuery({
staleTime: Infinity,
})

// 只有在第一次请求
queryClient.prefetchQuery(useTest1.getOptions())
// 永远会去请求
queryClient.prefetchQuery(useTest1.getFetchOptions())

const useTest2 = createQuery({
retry: 3,
})

// 会自动重试3次
queryClient.prefetchQuery(useTest2.getOptions())
// 不会自动重试
queryClient.prefetchQuery(useTest2.getFetchOptions())
```

### `fetcher``queryFn` 有什么不同

ReactQueryKit 会自动将 `fetcher` 转换为 `queryFn`,例如
Expand Down Expand Up @@ -648,6 +629,7 @@ createQuery({

- 支持传入数组 `queryKey`
- 支持推断 fetcher 的类型,您可以自动享受首选的类型。
- 支持创建整个 API 的形状

## Issues

Expand Down
60 changes: 21 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's `dependencies`:

```bash
$ npm i react-query-kit@beta
$ npm i react-query-ki
# or
$ yarn add react-query-kit@beta
$ yarn add react-query-kit
```

If you still on React Query Kit v2? Check out the v2 docs here: https://github.com/liaoliao666/react-query-kit/tree/v2#readme.
Expand Down Expand Up @@ -347,7 +347,7 @@ function App() {
mutation.mutate({ title: 'Do Laundry', content: 'content...' })
}}
>
Create Todo
create Todo
</button>
</>
)}
Expand Down Expand Up @@ -382,7 +382,7 @@ Returns
```tsx
import { router } from 'react-query-kit'

const posts = router(`posts`, {
const post = router(`post`, {
byId: router.query({
fetcher: (variables: { id: number }) =>
fetch(`/posts/${variables.id}`).then(res => res.json()),
Expand All @@ -406,28 +406,29 @@ const posts = router(`posts`, {
})

// get root key
posts.getKey() // ['posts']
post.getKey() // ['post']

// hooks
posts.byId.useQuery({ variables: { id: 1 } })
posts.byId.useSuspenseQuery({ variables: { id: 1 } })
posts.list.useInfiniteQuery()
posts.list.useSuspenseInfiniteQuery()
posts.add.useMutation()
post.byId.useQuery({ variables: { id: 1 } })
post.byId.useSuspenseQuery({ variables: { id: 1 } })
post.list.useInfiniteQuery()
post.list.useSuspenseInfiniteQuery()
post.add.useMutation()

// expose methods
posts.byId.getKey({ id: 1 }) // ['posts', 'byId', { id: 1 }]
posts.byId.getFetchOptions({ id: 1 })
posts.byId.getOptions({ id: 1 })
posts.byId.fetcher({ id: 1 })
posts.add.getKey() // ['posts', 'add']
posts.add.getOptions()
posts.add.mutationFn({ title: 'title', content: 'content' })
post.byId.getKey({ id: 1 }) // ['post', 'byId', { id: 1 }]
post.byId.getFetchOptions({ id: 1 })
post.byId.getOptions({ id: 1 })
post.byId.fetcher({ id: 1 })
post.add.getKey() // ['post', 'add']
post.add.getOptions()
post.add.mutationFn({ title: 'title', content: 'content' })

// infer types
type Data = inferData<typeof posts.list>
type FnData = inferFnData<typeof posts.list>
type Variables = inferVariables<typeof posts.list>
type Error = inferError<typeof posts.list>
```
## API Reference
Expand Down Expand Up @@ -590,31 +591,11 @@ inferOptions<typeof useProjects> // InfiniteQueryHookOptions<...>

### What is the difference between `getFetchOptions` and `getOptions`?

`getFetchOptions` will only return necessary options, while options like `staleTime` and `retry` will be omited

```ts
const useTest1 = createQuery({
staleTime: Infinity,
})

// Only triggers on the first request
queryClient.prefetchQuery(useTest1.getOptions())
// Will always trigger a request
queryClient.prefetchQuery(useTest1.getFetchOptions())

const useTest2 = createQuery({
retry: 3,
})

// Automatically retries 3 times
queryClient.prefetchQuery(useTest2.getOptions())
// Does not automatically retry
queryClient.prefetchQuery(useTest2.getFetchOptions())
```
`getFetchOptions` would only return necessary options, while options like `staleTime` and `retry` would be omited

### What is the difference between `fetcher` and `queryFn`?

ReactQueryKit automatically converts fetcher to queryFn, as shown below:
ReactQueryKit would automatically converts fetcher to queryFn, as shown below:

```ts
const useTest = createQuery({
Expand Down Expand Up @@ -648,6 +629,7 @@ What you benefit from ReactQueryKit 3

- Support hierarchical key
- Support infer the types of fetcher, you can enjoy the preferred types automatically.
- Support to create a shape of your entire API

## Issues

Expand Down
12 changes: 6 additions & 6 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -517,9 +517,9 @@ export type inferFnData<T> = T extends {
? TFnData
: never

export type inferError<T> = T extends {
fetcher: ExposeFetcher<any, infer TError, any>
}
export type inferError<T> = T extends ExposeMethods<any, any, infer TError>
? TError
: T extends ExposeMethods<any, any, infer TError, any>
? TError
: T extends ExposeMutationMethods<any, any, infer TError, any>
? TError
Expand Down Expand Up @@ -668,19 +668,19 @@ export type CreateRouter<TConfig extends RouterConfig> = {
TFnData,
DefaultTo<TVariables, void>,
DefaultTo<TError, CompatibleError>,
TPageParam
DefaultTo<TPageParam, number>
>
useSuspenseInfiniteQuery: SuspenseInfiniteQueryHook<
TFnData,
DefaultTo<TVariables, void>,
DefaultTo<TError, CompatibleError>,
TPageParam
DefaultTo<TPageParam, number>
>
} & ExposeMethods<
TFnData,
DefaultTo<TVariables, void>,
DefaultTo<TError, CompatibleError>,
TPageParam
DefaultTo<TPageParam, number>
>
: TConfig[K] extends Omit<
RouterQuery<infer TFnData, infer TVariables, infer TError>,
Expand Down
10 changes: 3 additions & 7 deletions src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const withMiddleware = (
options?: { client?: QueryClient; use?: Middleware[] },
queryClient?: QueryClient
) {
const [middleware, opts] = [
const [uses, opts]: [Middleware[], any] = [
ReactQuery.useQueryClient(
// @ts-ignore Compatible with ReactQuery v4
isV5 ? queryClient : options
Expand All @@ -37,13 +37,9 @@ export const withMiddleware = (
],
[[]]
)
const composed = uses.reduceRight((next, use) => use(next), hook)

let next = hook
for (let i = middleware.length; i--; ) {
next = middleware[i](next)
}

return next(opts, queryClient)
return composed(opts, queryClient)
}
}

Expand Down
12 changes: 11 additions & 1 deletion tests/createQuery.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,17 @@ describe('createQuery', () => {
fetcher: (_variables: { id: number }) => {
return 'test'
},
use: [myMiddileware],
use: [
useNext => {
return options =>
useNext({
...options,
initialData: 'fakeData',
enabled: false,
})
},
myMiddileware,
],
})

const states: QueryHookResult<any, any>[] = []
Expand Down

0 comments on commit 7bd7e17

Please sign in to comment.