Skip to content

Commit 27e85c4

Browse files
author
liaoxuan
committed
feat: remove createImmutableQuery & middleware supports pass in custom hook
1 parent ccdb4fc commit 27e85c4

12 files changed

Lines changed: 159 additions & 286 deletions

‎README-zh_CN.md‎

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@
4646
- 使用
4747
- [createQuery](#createquery)
4848
- [createInfiniteQuery](#createinfinitequery)
49-
- [createImmutableQuery](#createimmutablequery)
5049
- [createSuspenseQuery](#createsuspensequery)
5150
- [createSuspenseInfiniteQuery](#createsuspenseinfinitequery)
5251
- [createMutation](#createmutation)
@@ -94,6 +93,8 @@ const usePost = createQuery<Response, Variables, Error>({
9493
// 如果你只想在有id时且没有数据时请求，可以这么设置
9594
enabled: (data, variables) => !data && variables.id,
9695
suspense: true,
96+
// 你还可以通过中间件来定制这个 hook 的行为
97+
use: [myMiddleware]
9798
})
9899

99100
const variables = { id: 1 }
@@ -136,7 +137,7 @@ const data = await queryClient.fetchQuery(
136137
const queries = useQueries({
137138
queries: [
138139
usePost.getFetchOptions(variables)，
139-
useProjects.getFetchOptions(),
140+
useUser.getFetchOptions(),
140141
],
141142
})
142143

@@ -285,30 +286,6 @@ Returns
285286
- `setData: (updater: Updater<TData>, options?: SetDataOptions) => TData | undefined`
286287
- 它的参数与 `queryClient.setQueryData` 类似，但不需要传入 `queryKey`
287288

288-
## createImmutableQuery
289-
290-
如果资源是不可变的，即使我们再怎么重新请求也永远不会发生任何改变，那么我们可以禁用它的所有的自动重新请求。
291-
ReactQueryKit 提供了一个辅助函数 `createImmutableQuery` 来标记资源为不可变的：
292-
293-
```ts
294-
import { createImmutableQuery } from 'react-query-kit'
295-
296-
createImmutableQuery({
297-
...options,
298-
})
299-
300-
// 相当于
301-
createQuery({
302-
...options,
303-
refetchInterval: false,
304-
refetchOnMount: false,
305-
refetchOnReconnect: false,
306-
refetchOnWindowFocus: false,
307-
staleTime: Infinity,
308-
gcTime: Infinity,
309-
})
310-
```
311-
312289
## createSuspenseQuery
313290

314291
这与在查询配置中将 suspense 选项设置为 true 具有相同的效果，但在 TypeScript 的体验更好，因为 data 是有定义的（因为错误和加载状态由 Suspense 和 ErrorBoundaries 处理）。
@@ -489,9 +466,11 @@ exit a
489466
```ts
490467
import { inferData, inferFnData, inferVariables } from 'react-query-kit'
491468

492-
type Variables = inferVariables<typeof usePost>
493-
type Data = inferData<typeof usePost>
494-
type FnData = inferFnData<typeof usePost>
469+
const useProjects = createInfiniteQuery<Response, Variables>(...)
470+
471+
inferVariables<typeof usePost> // Variables
472+
inferData<typeof usePost> // InfiniteData<Response>
473+
inferFnData<typeof usePost> // Response
495474
```
496475

497476
## Issues

‎README.md‎

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ English | [简体中文](./README-zh_CN.md)
4646
- Usage
4747
- [createQuery](#createquery)
4848
- [createInfiniteQuery](#createinfinitequery)
49-
- [createImmutableQuery](#createimmutablequery)
5049
- [createSuspenseQuery](#createsuspensequery)
5150
- [createSuspenseInfiniteQuery](#createsuspenseinfinitequery)
5251
- [createMutation](#createmutation)
@@ -140,7 +139,7 @@ const data = await queryClient.fetchQuery(usePost.getFetchOptions(variables))
140139
const queries = useQueries({
141140
queries: [
142141
usePost.getFetchOptions(variables),
143-
useProjects.getFetchOptions(),
142+
useUser.getFetchOptions(),
144143
],
145144
})
146145

@@ -288,30 +287,6 @@ Returns
288287
- `setData: (updater: Updater<InfiniteData<TFnData>>, options?: SetDataOptions) => TData | undefined`
289288
- it's args similar with `queryClient.setQueryData` but without `queryKey`
290289

291-
## createImmutableQuery
292-
293-
If the resource is immutable, no matter how many times we request it again, it will never change. In this case, we can disable all automatic re-requests for it.
294-
ReactQueryKit provides a helper function `createImmutableQuery` to mark a resource as immutable.
295-
296-
```ts
297-
import { createImmutableQuery } from 'react-query-kit'
298-
299-
createImmutableQuery({
300-
...options,
301-
})
302-
303-
// equals to
304-
createQuery({
305-
...options,
306-
refetchInterval: false,
307-
refetchOnMount: false,
308-
refetchOnReconnect: false,
309-
refetchOnWindowFocus: false,
310-
staleTime: Infinity,
311-
gcTime: Infinity,
312-
})
313-
```
314-
315290
## createSuspenseQuery
316291

317292
This has the same effect as setting the `suspense` option to `true` in the query config, but it works better in TypeScript, because `data` is guaranteed to be defined (as errors and loading states are handled by Suspense- and ErrorBoundaries).
@@ -500,9 +475,11 @@ You can extract the TypeScript type of any custom hook with `inferVariables` or
500475
```ts
501476
import { inferData, inferFnData, inferVariables } from 'react-query-kit'
502477

503-
type Variables = inferVariables<typeof usePost>
504-
type Data = inferData<typeof usePost>
505-
type FnData = inferFnData<typeof usePost>
478+
const useProjects = createInfiniteQuery<Response, Variables>(...)
479+
480+
inferVariables<typeof usePost> // Variables
481+
inferData<typeof usePost> // InfiniteData<Response>
482+
inferFnData<typeof usePost> // Response
506483
```
507484

508485
## Issues

‎src/createBaseQuery.ts‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type {
1111
CompatibleWithV4,
1212
Middleware,
1313
} from './types'
14-
import { getQueryKey, useCompatibeQueryClient, withMiddlewares } from './utils'
14+
import { getQueryKey, useCompatibeQueryClient, withMiddleware } from './utils'
1515

1616
interface CreateQueryOptions
1717
extends Omit<UseBaseQueryOptions, 'queryKey' | 'queryFn' | 'enabled'>,
@@ -30,7 +30,8 @@ export function createBaseQuery(
3030
useRQHook: (options: any, queryClient?: any) => any,
3131
overrideOptions?: QueryBaseHookOptions
3232
): any {
33-
const { primaryKey } = defaultOptions as CreateQueryOptions
33+
const { primaryKey, queryFn, queryKeyHashFn } =
34+
defaultOptions as CreateQueryOptions
3435

3536
if (process.env.NODE_ENV !== 'production') {
3637
// @ts-ignore
@@ -48,55 +49,53 @@ export function createBaseQuery(
4849
const getFetchOptions = (variables: any) => {
4950
return {
5051
queryKey: getKey(variables),
51-
queryFn: defaultOptions.queryFn,
52-
queryKeyHashFn: defaultOptions.queryKeyHashFn,
52+
queryFn,
53+
queryKeyHashFn,
5354
getPreviousPageParam: (defaultOptions as any).getPreviousPageParam,
5455
getNextPageParam: (defaultOptions as any).getNextPageParam,
5556
initialPageParam: (defaultOptions as any).initialPageParam,
5657
}
5758
}
5859

59-
const useGeneratedQuery = (
60+
const useBaseHook = (
6061
options: QueryBaseHookOptions,
6162
queryClient?: CompatibleWithV4<QueryClient, void>
6263
) => {
6364
const client = useCompatibeQueryClient(options, queryClient)
64-
6565
const { enabled, variables, ...mergedOptions } = {
6666
...options,
6767
...overrideOptions,
6868
} as QueryBaseHookOptions
69-
7069
const queryKey = getKey(variables)
7170

72-
const result = useRQHook(
71+
return Object.assign(
72+
useRQHook(
73+
{
74+
...mergedOptions,
75+
enabled:
76+
typeof enabled === 'function'
77+
? enabled(client.getQueryData(queryKey), variables)
78+
: enabled,
79+
queryKey,
80+
},
81+
client
82+
),
7383
{
74-
...mergedOptions,
75-
enabled:
76-
typeof enabled === 'function'
77-
? enabled(client.getQueryData(queryKey), variables)
78-
: enabled,
79-
queryKey,
80-
},
81-
client
84+
queryKey: queryKey,
85+
variables,
86+
setData: (
87+
updater: Updater<any, any>,
88+
setDataOptions?: SetDataOptions
89+
) => client.setQueryData(queryKey, updater, setDataOptions),
90+
}
8291
)
83-
84-
return Object.assign(result, {
85-
queryKey: queryKey,
86-
variables,
87-
setData: (updater: Updater<any, any>, setDataOptions?: SetDataOptions) =>
88-
client.setQueryData(queryKey, updater, setDataOptions),
89-
})
9092
}
9193

92-
return Object.assign(
93-
withMiddlewares(useGeneratedQuery, defaultOptions, 'queries'),
94-
{
95-
getPrimaryKey,
96-
getKey,
97-
queryFn: defaultOptions.queryFn,
98-
queryKeyHashFn: defaultOptions.queryKeyHashFn,
99-
getFetchOptions,
100-
}
101-
)
94+
return Object.assign(withMiddleware(useBaseHook, defaultOptions, 'queries'), {
95+
getPrimaryKey,
96+
getKey,
97+
queryFn,
98+
queryKeyHashFn,
99+
getFetchOptions,
100+
})
102101
}

‎src/createImmutableQuery.tsx‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎src/createInfiniteQuery.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@ export interface CreateInfiniteQueryOptions<
2828
use?: Middleware<InfiniteQueryHook<TFnData, TVariables, TError, TPageParam>>[]
2929
}
3030

31-
export function createInfiniteQuery<
31+
export const createInfiniteQuery = <
3232
TFnData,
3333
TVariables = any,
3434
TError = DefaultError,
3535
TPageParam = number
3636
>(
3737
options: CreateInfiniteQueryOptions<TFnData, TVariables, TError, TPageParam>
38-
): InfiniteQueryHook<TFnData, TVariables, TError, TPageParam> {
38+
): InfiniteQueryHook<TFnData, TVariables, TError, TPageParam> => {
3939
return createBaseQuery(options, useInfiniteQuery)
4040
}

‎src/createMutation.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useMutation } from '@tanstack/react-query'
22
import type { UseMutationOptions } from '@tanstack/react-query'
33

44
import type { DefaultError, Middleware, MutationHook } from './types'
5-
import { withMiddlewares } from './utils'
5+
import { withMiddleware } from './utils'
66

77
export interface CreateMutationOptions<
88
TData = unknown,
@@ -13,18 +13,18 @@ export interface CreateMutationOptions<
1313
use?: Middleware<MutationHook<TData, TError, TVariables>>[]
1414
}
1515

16-
export function createMutation<
16+
export const createMutation = <
1717
TData = unknown,
1818
TVariables = void,
1919
TError = DefaultError,
2020
TContext = unknown
2121
>(
2222
defaultOptions: CreateMutationOptions<TData, TVariables, TError, TContext>
23-
): MutationHook<TData, TVariables, TError> {
23+
): MutationHook<TData, TVariables, TError> => {
2424
const getKey = () => defaultOptions.mutationKey
2525

2626
return Object.assign(
27-
withMiddlewares(useMutation, defaultOptions, 'mutations'),
27+
withMiddleware(useMutation, defaultOptions, 'mutations'),
2828
{
2929
getKey,
3030
mutationFn: defaultOptions.mutationFn,

‎src/createQuery.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ export interface CreateQueryOptions<
2222
use?: Middleware<QueryHook<TFnData, TVariables, TError>>[]
2323
}
2424

25-
export function createQuery<TFnData, TVariables = any, TError = DefaultError>(
25+
export const createQuery = <TFnData, TVariables = any, TError = DefaultError>(
2626
options: CreateQueryOptions<TFnData, TVariables, TError>
27-
): QueryHook<TFnData, TVariables, TError> {
27+
): QueryHook<TFnData, TVariables, TError> => {
2828
return createBaseQuery(options, useQuery)
2929
}

‎src/createSuspenseInfiniteQuery.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export interface CreateSuspenseInfiniteQueryOptions<
3636
use?: Middleware<SuspenseInfiniteQueryHook<TFnData, TVariables, TVariables>>[]
3737
}
3838

39-
export function createSuspenseInfiniteQuery<
39+
export const createSuspenseInfiniteQuery = <
4040
TFnData,
4141
TVariables = any,
4242
TError = DefaultError,
@@ -48,7 +48,7 @@ export function createSuspenseInfiniteQuery<
4848
TError,
4949
TPageParam
5050
>
51-
): SuspenseInfiniteQueryHook<TFnData, TVariables, TError, TPageParam> {
51+
): SuspenseInfiniteQueryHook<TFnData, TVariables, TError, TPageParam> => {
5252
return createBaseQuery(options, useInfiniteQuery, {
5353
enabled: true,
5454
suspense: true,

‎src/createSuspenseQuery.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@ export interface CreateSuspenseQueryOptions<
2929
use?: Middleware<SuspenseQueryHook<TFnData, TVariables, TVariables>>[]
3030
}
3131

32-
export function createSuspenseQuery<
32+
export const createSuspenseQuery = <
3333
TFnData,
3434
TVariables = any,
3535
TError = DefaultError
3636
>(
3737
options: CreateSuspenseQueryOptions<TFnData, TVariables, TError>
38-
): SuspenseQueryHook<TFnData, TVariables, TError> {
38+
): SuspenseQueryHook<TFnData, TVariables, TError> => {
3939
return createBaseQuery(options, useQuery, {
4040
enabled: true,
4141
suspense: true,

0 commit comments

Comments
 (0)