Skip to content

Commit 9ea0fd9

Browse files
TkDodoTkDodo
authored
Merge branch 'main' into feature/public-observers
2 parents aef18c2 + f025a7c commit 9ea0fd9

File tree

2 files changed

+62
-71
lines changed

2 files changed

+62
-71
lines changed

‎docs/framework/react/guides/migrating-to-react-query-4.md‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ However, we have not followed this concept through to all apis. For example, whe
6565
To streamline all apis, we've decided to make all keys Arrays only:
6666

6767
```tsx
68-
- useQuery('todos', fetchTodos) // [!code --]
69-
+ useQuery(['todos'], fetchTodos) // [!code ++]
68+
;-useQuery('todos', fetchTodos) + // [!code --]
69+
useQuery(['todos'], fetchTodos) // [!code ++]
7070
```
7171

7272
#### Codemod
@@ -117,8 +117,8 @@ Also, have a look at [the guide on dependent queries](../dependent-queries)
117117
Due to this change, disabled queries (even temporarily disabled ones) will start in `loading` state. To make migration easier, especially for having a good flag to know when to display a loading spinner, you can check for `isInitialLoading` instead of `isLoading`:
118118

119119
```tsx
120-
- isLoading // [!code --]
121-
+ isInitialLoading // [!code ++]
120+
;-isLoading + // [!code --]
121+
isInitialLoading // [!code ++]
122122
```
123123

124124
See also the guide on [disabling queries](../disabling-queries#isInitialLoading)
@@ -128,8 +128,16 @@ See also the guide on [disabling queries](../disabling-queries#isInitialLoading)
128128
The `useQueries` hook now accepts an object with a `queries` prop as its input. The value of the `queries` prop is an array of queries (this array is identical to what was passed into `useQueries` in v3).
129129

130130
```tsx
131-
- useQueries([{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }]) // [!code --]
132-
+ useQueries({ queries: [{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }] }) // [!code ++]
131+
;-useQueries([
132+
{ queryKey1, queryFn1, options1 },
133+
{ queryKey2, queryFn2, options2 },
134+
]) + // [!code --]
135+
useQueries({
136+
queries: [
137+
{ queryKey1, queryFn1, options1 },
138+
{ queryKey2, queryFn2, options2 },
139+
],
140+
}) // [!code ++]
133141
```
134142

135143
### Undefined is an illegal cache value for successful queries

‎docs/framework/react/guides/migrating-to-v5.md‎

Lines changed: 48 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -14,87 +14,70 @@ useQuery and friends used to have many overloads in TypeScript - different ways
1414
now we only support the object format.
1515

1616
```tsx
17-
- useQuery(key, fn, options) // [!code --]
18-
+ useQuery({ queryKey, queryFn, ...options }) // [!code ++]
19-
20-
- useInfiniteQuery(key, fn, options) // [!code --]
21-
+ useInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++]
22-
23-
- useMutation(fn, options) // [!code --]
24-
+ useMutation({ mutationFn, ...options }) // [!code ++]
25-
26-
- useIsFetching(key, filters) // [!code --]
27-
+ useIsFetching({ queryKey, ...filters }) // [!code ++]
28-
29-
- useIsMutating(key, filters) // [!code --]
30-
+ useIsMutating({ mutationKey, ...filters }) // [!code ++]
17+
;-useQuery(key, fn, options) + // [!code --]
18+
useQuery({ queryKey, queryFn, ...options }) - // [!code ++]
19+
useInfiniteQuery(key, fn, options) + // [!code --]
20+
useInfiniteQuery({ queryKey, queryFn, ...options }) - // [!code ++]
21+
useMutation(fn, options) + // [!code --]
22+
useMutation({ mutationFn, ...options }) - // [!code ++]
23+
useIsFetching(key, filters) + // [!code --]
24+
useIsFetching({ queryKey, ...filters }) - // [!code ++]
25+
useIsMutating(key, filters) + // [!code --]
26+
useIsMutating({ mutationKey, ...filters }) // [!code ++]
3127
```
3228

3329
```tsx
34-
- queryClient.isFetching(key, filters) // [!code --]
35-
+ queryClient.isFetching({ queryKey, ...filters }) // [!code ++]
36-
37-
- queryClient.ensureQueryData(key, filters) // [!code --]
38-
+ queryClient.ensureQueryData({ queryKey, ...filters }) // [!code ++]
39-
40-
- queryClient.getQueriesData(key, filters) // [!code --]
41-
+ queryClient.getQueriesData({ queryKey, ...filters }) // [!code ++]
42-
43-
- queryClient.setQueriesData(key, updater, filters, options) // [!code --]
44-
+ queryClient.setQueriesData({ queryKey, ...filters }, updater, options) // [!code ++]
45-
46-
- queryClient.removeQueries(key, filters) // [!code --]
47-
+ queryClient.removeQueries({ queryKey, ...filters }) // [!code ++]
48-
49-
- queryClient.resetQueries(key, filters, options) // [!code --]
50-
+ queryClient.resetQueries({ queryKey, ...filters }, options) // [!code ++]
51-
52-
- queryClient.cancelQueries(key, filters, options) // [!code --]
53-
+ queryClient.cancelQueries({ queryKey, ...filters }, options) // [!code ++]
54-
55-
- queryClient.invalidateQueries(key, filters, options) // [!code --]
56-
+ queryClient.invalidateQueries({ queryKey, ...filters }, options) // [!code ++]
57-
58-
- queryClient.refetchQueries(key, filters, options) // [!code --]
59-
+ queryClient.refetchQueries({ queryKey, ...filters }, options) // [!code ++]
60-
61-
- queryClient.fetchQuery(key, fn, options) // [!code --]
62-
+ queryClient.fetchQuery({ queryKey, queryFn, ...options }) // [!code ++]
63-
64-
- queryClient.prefetchQuery(key, fn, options) // [!code --]
65-
+ queryClient.prefetchQuery({ queryKey, queryFn, ...options }) // [!code ++]
66-
67-
- queryClient.fetchInfiniteQuery(key, fn, options) // [!code --]
68-
+ queryClient.fetchInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++]
69-
70-
- queryClient.prefetchInfiniteQuery(key, fn, options) // [!code --]
71-
+ queryClient.prefetchInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++]
30+
;-queryClient.isFetching(key, filters) + // [!code --]
31+
queryClient.isFetching({ queryKey, ...filters }) - // [!code ++]
32+
queryClient.ensureQueryData(key, filters) + // [!code --]
33+
queryClient.ensureQueryData({ queryKey, ...filters }) - // [!code ++]
34+
queryClient.getQueriesData(key, filters) + // [!code --]
35+
queryClient.getQueriesData({ queryKey, ...filters }) - // [!code ++]
36+
queryClient.setQueriesData(key, updater, filters, options) + // [!code --]
37+
queryClient.setQueriesData({ queryKey, ...filters }, updater, options) - // [!code ++]
38+
queryClient.removeQueries(key, filters) + // [!code --]
39+
queryClient.removeQueries({ queryKey, ...filters }) - // [!code ++]
40+
queryClient.resetQueries(key, filters, options) + // [!code --]
41+
queryClient.resetQueries({ queryKey, ...filters }, options) - // [!code ++]
42+
queryClient.cancelQueries(key, filters, options) + // [!code --]
43+
queryClient.cancelQueries({ queryKey, ...filters }, options) - // [!code ++]
44+
queryClient.invalidateQueries(key, filters, options) + // [!code --]
45+
queryClient.invalidateQueries({ queryKey, ...filters }, options) - // [!code ++]
46+
queryClient.refetchQueries(key, filters, options) + // [!code --]
47+
queryClient.refetchQueries({ queryKey, ...filters }, options) - // [!code ++]
48+
queryClient.fetchQuery(key, fn, options) + // [!code --]
49+
queryClient.fetchQuery({ queryKey, queryFn, ...options }) - // [!code ++]
50+
queryClient.prefetchQuery(key, fn, options) + // [!code --]
51+
queryClient.prefetchQuery({ queryKey, queryFn, ...options }) - // [!code ++]
52+
queryClient.fetchInfiniteQuery(key, fn, options) + // [!code --]
53+
queryClient.fetchInfiniteQuery({ queryKey, queryFn, ...options }) - // [!code ++]
54+
queryClient.prefetchInfiniteQuery(key, fn, options) + // [!code --]
55+
queryClient.prefetchInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++]
7256
```
7357

7458
```tsx
75-
- queryCache.find(key, filters) // [!code --]
76-
+ queryCache.find({ queryKey, ...filters }) // [!code ++]
77-
78-
- queryCache.findAll(key, filters) // [!code --]
79-
+ queryCache.findAll({ queryKey, ...filters }) // [!code ++]
59+
;-queryCache.find(key, filters) + // [!code --]
60+
queryCache.find({ queryKey, ...filters }) - // [!code ++]
61+
queryCache.findAll(key, filters) + // [!code --]
62+
queryCache.findAll({ queryKey, ...filters }) // [!code ++]
8063
```
8164

8265
### `queryClient.getQueryData` now accepts queryKey only as an Argument
8366

8467
`queryClient.getQueryData` argument is changed to accept only a `queryKey`
8568

8669
```tsx
87-
- queryClient.getQueryData(queryKey, filters) // [!code --]
88-
+ queryClient.getQueryData(queryKey) // [!code ++]
70+
;-queryClient.getQueryData(queryKey, filters) + // [!code --]
71+
queryClient.getQueryData(queryKey) // [!code ++]
8972
```
9073

9174
### `queryClient.getQueryState` now accepts queryKey only as an Argument
9275

9376
`queryClient.getQueryState` argument is changed to accept only a `queryKey`
9477

9578
```tsx
96-
- queryClient.getQueryState(queryKey, filters) // [!code --]
97-
+ queryClient.getQueryState(queryKey) // [!code ++]
79+
;-queryClient.getQueryState(queryKey, filters) + // [!code --]
80+
queryClient.getQueryState(queryKey) // [!code ++]
9881
```
9982

10083
#### Codemod
@@ -156,11 +139,11 @@ But It doesn't make much sense to do this while a query is still active, because
156139
if you still need to remove a query, you can use `queryClient.removeQueries({queryKey: key})`
157140

158141
```tsx
159-
const queryClient = useQueryClient();
160-
const query = useQuery({ queryKey, queryFn });
142+
const queryClient = useQueryClient()
143+
const query = useQuery({ queryKey, queryFn })
161144

162-
- query.remove() // [!code --]
163-
+ queryClient.removeQueries({ queryKey }) // [!code ++]
145+
;-query.remove() + // [!code --]
146+
queryClient.removeQueries({ queryKey }) // [!code ++]
164147
```
165148

166149
### The minimum required TypeScript version is now 4.7

0 commit comments

Comments
 (0)