You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/react/community/suspensive-react-query.md
+15-12Lines changed: 15 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,11 +5,18 @@ title: Suspensive React Query
5
5
6
6
Typesafe useQuery, useQueries, useInfiniteQuery with default suspense option.
7
7
8
-
Use @suspensive/react-query, delegate loading and error handling to the outside of the component with [useSuspenseQuery](https://suspensive.org/docs/react-query/src/useSuspenseQuery.i18n), [useSuspenseQueries](https://suspensive.org/docs/react-query/src/useSuspenseQueries.i18n) and [useSuspenseInfiniteQuery](https://suspensive.org/docs/react-query/src/useSuspenseInfiniteQuery.i18n), and focus on success inside the component.
8
+
Use @suspensive/react-query, delegate loading and error handling to the outside of the component with [useSuspenseQuery](https://suspensive.org/docs/react-query/useSuspenseQuery), [useSuspenseQueries](https://suspensive.org/docs/react-query/useSuspenseQueries) and [useSuspenseInfiniteQuery](https://suspensive.org/docs/react-query/useSuspenseInfiniteQuery), and focus on success inside the component.
9
9
10
10
You don't even need to use the isSuccess flag.
11
11
12
-
## Installation
12
+
## useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery is Official API now! (from v5)
13
+
14
+
From @tanstack/react-query v5 provides [official public hook apis for suspense](https://tanstack.com/query/v5/docs/react/guides/suspense) like @suspensive/react-query's hooks. so if you're using @tanstack/react-query v5, Migrate our hooks to hooks of official @tanstack/react-query please.
15
+
16
+
### But if you are still using @tanstack/react-query v4 because of unavoidable reasons
17
+
18
+
There is lot of projects can't update our @tanstack/react-query version to v5.
19
+
If you want to experience early useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery in also v4, You can use them with @suspensive/react-query first
13
20
14
21
You can install @suspensive/react-query via [NPM](https://www.npmjs.com/package/@suspensive/react-query).
If you turn suspense mode on in @tanstack/react-query, You can use useQuery with Suspense and ErrorBoundary.
33
+
If you turn suspense mode on in @tanstack/react-query v4, You can use useQuery with Suspense and ErrorBoundary.
27
34
28
35
```tsx
29
-
import { useQuery } from'@tanstack/react-query'
36
+
import { useQuery } from'@tanstack/react-query'// this is v4
30
37
31
38
const Example = () => {
32
39
const query =useQuery({
@@ -44,7 +51,7 @@ const Example = () => {
44
51
```
45
52
46
53
Typically query.data will be `TData | undefined` like this code example.
47
-
But actual useQuery's return type:query.data will be always fulfilled because of [Suspense](https://suspensive.org/docs/react/src/Suspense.i18n) and [ErrorBoundary](https://suspensive.org/docs/react/src/ErrorBoundary.i18n) as parent of this component.
54
+
But actual useQuery's return type:query.data will be always fulfilled because of [Suspense](https://suspensive.org/docs/react/Suspense) and [ErrorBoundary](https://suspensive.org/docs/react/ErrorBoundary) as parent of this component.
48
55
49
56
This is why @suspensive/react-query provide **useSuspenseQuery**
50
57
@@ -55,13 +62,13 @@ Return type of this hook have no isLoading, isError property. because Suspense a
55
62
In addition, this hook's options have default suspense: true. and you can provide new options to this hook like useQuery of @tanstack/react-query.
import { useSuspenseQuery } from'@suspensive/react-query'// this is v4
59
66
60
67
const Example = () => {
61
68
const query =useSuspenseQuery({
62
69
queryKey,
63
70
queryFn,
64
-
}) // suspense:true is default.
71
+
}) // suspense:true is default. @tanstack/react-query v5 also removed useQuery's suspense option to promote using useSuspenseQuery, so if you want to migrate @tanstack/react-query with using suspense gradually, @suspensive/react-query will be good choice
65
72
66
73
// No need to do type narrowing by isSuccess
67
74
query.data// TData
@@ -74,10 +81,6 @@ Now, we can concentrate component as any fetching will be always success in comp
74
81
75
82
### useSuspenseQuery is Official API now! (from v5)
76
83
77
-
@suspensive/react-query provides not only [useSuspenseQuery](https://suspensive.org/docs/react-query/src/useSuspenseQuery.i18n), also [useSuspenseQueries](https://suspensive.org/docs/react-query/src/useSuspenseQueries.i18n), [useSuspenseInfiniteQuery](https://suspensive.org/docs/react-query/src/useSuspenseInfiniteQuery.i18n). From @tanstack/react-query v5 provides [official public hook apis for suspense](https://tanstack.com/query/v5/docs/react/guides/suspense) like @suspensive/react-query's hooks. If want to use them early in v4, use this @suspensive/react-query first.
84
+
@suspensive/react-query provides not only [useSuspenseQuery](https://suspensive.org/docs/react-query/useSuspenseQuery), also [useSuspenseQueries](https://suspensive.org/docs/react-query/useSuspenseQueries), [useSuspenseInfiniteQuery](https://suspensive.org/docs/react-query/useSuspenseInfiniteQuery). From @tanstack/react-query v5 provides [official public hook apis for suspense](https://tanstack.com/query/v5/docs/react/guides/suspense) like @suspensive/react-query's hooks. If want to use them early in v4, use this @suspensive/react-query first.
78
85
79
86
Check the complete documentation on [Suspensive Official Docs Site](https://suspensive.org/) and also welcome Pull Request on [Suspensive GitHub](https://github.com/suspensive/react)
0 commit comments