Skip to content

Commit c03e159

Browse files
authored
docs(suspensive-react-query): update links (#6175)
* docs(suspensive-react-query): update link * chore(suspensive-react-query): update doc to promote migrating @tanstack/react-query v4 to v5
1 parent f37fcf3 commit c03e159

File tree

1 file changed

+15
-12
lines changed

1 file changed

+15
-12
lines changed

docs/react/community/suspensive-react-query.md

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,18 @@ title: Suspensive React Query
55

66
Typesafe useQuery, useQueries, useInfiniteQuery with default suspense option.
77

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.
99

1010
You don't even need to use the isSuccess flag.
1111

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
1320

1421
You can install @suspensive/react-query via [NPM](https://www.npmjs.com/package/@suspensive/react-query).
1522

@@ -23,10 +30,10 @@ $ yarn add @suspensive/react-query
2330

2431
### Motivation
2532

26-
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.
2734

2835
```tsx
29-
import { useQuery } from '@tanstack/react-query'
36+
import { useQuery } from '@tanstack/react-query' // this is v4
3037
3138
const Example = () => {
3239
const query = useQuery({
@@ -44,7 +51,7 @@ const Example = () => {
4451
```
4552

4653
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.
4855

4956
This is why @suspensive/react-query provide **useSuspenseQuery**
5057

@@ -55,13 +62,13 @@ Return type of this hook have no isLoading, isError property. because Suspense a
5562
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.
5663

5764
```tsx
58-
import { useSuspenseQuery } from '@suspensive/react-query'
65+
import { useSuspenseQuery } from '@suspensive/react-query' // this is v4
5966
6067
const Example = () => {
6168
const query = useSuspenseQuery({
6269
queryKey,
6370
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
6572

6673
// No need to do type narrowing by isSuccess
6774
query.data // TData
@@ -74,10 +81,6 @@ Now, we can concentrate component as any fetching will be always success in comp
7481

7582
### useSuspenseQuery is Official API now! (from v5)
7683

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.
7885

7986
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)
80-
81-
82-
83-

0 commit comments

Comments
 (0)