Skip to content

Commit 9d50910

Browse files
TkDodoTkDodo
authored
Merge branch 'alpha' into alpha
2 parents 9ba3075 + 28e0e28 commit 9d50910

136 files changed

Lines changed: 8070 additions & 10583 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ jobs:
2727
fetch-depth: '0'
2828
- uses: pnpm/[email protected]
2929
with:
30-
version: 7
30+
version: 8
3131
- uses: actions/setup-node@v3
3232
with:
3333
node-version: 18.16.0

‎.github/workflows/pr.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ jobs:
1919
repository: ${{github.event.pull_request.head.repo.full_name}}
2020
- uses: pnpm/[email protected]
2121
with:
22-
version: 7
22+
version: 8
2323
- uses: actions/setup-node@v3
2424
with:
2525
node-version: 18.16.0
@@ -39,7 +39,7 @@ jobs:
3939
repository: ${{github.event.pull_request.head.repo.full_name}}
4040
- uses: pnpm/[email protected]
4141
with:
42-
version: 7
42+
version: 8
4343
- uses: actions/setup-node@v3
4444
with:
4545
node-version: 18.16.0
@@ -76,7 +76,7 @@ jobs:
7676
repository: ${{github.event.pull_request.head.repo.full_name}}
7777
- uses: pnpm/[email protected]
7878
with:
79-
version: 7
79+
version: 8
8080
- uses: actions/setup-node@v3
8181
with:
8282
node-version: 18.16.0

‎docs/config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,10 @@
208208
{
209209
"label": "Angular Query",
210210
"to": "react/community/angular-query"
211+
},
212+
{
213+
"label": "Suspensive React Query",
214+
"to": "react/community/suspensive-react-query"
211215
}
212216
]
213217
},

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
id: suspensive-react-query
3+
title: Suspensive React Query
4+
---
5+
6+
Typesafe useQuery, useInfiniteQuery with default suspense option.
7+
8+
Use @suspensive/react-query, delegate loading and error handling to the outside of the component with useSuspenseQuery and useSuspenseInfiniteQuery, and focus on success inside the component.
9+
10+
You don't even need to use the isSuccess flag.
11+
12+
## Installation
13+
You can install @suspensive/react-query via [NPM](https://www.npmjs.com/package/@suspensive/react-query).
14+
15+
```bash
16+
$ npm i @suspensive/react @suspensive/react-query
17+
# or
18+
$ pnpm add @suspensive/react @suspensive/react-query
19+
# or
20+
$ yarn add @suspensive/react @suspensive/react-query
21+
```
22+
23+
### Motivation
24+
25+
If you turn suspense mode on in @tanstack/react-query, You can use useQuery with Suspense and ErrorBoundary.
26+
27+
```tsx
28+
import { useQuery } from '@tanstack/react-query'
29+
30+
const Example = () => {
31+
const query = useQuery(queryKey, queryFn, {
32+
suspense: true,
33+
})
34+
35+
query.data // TData | undefined
36+
37+
if (query.isSuccess) {
38+
query.data // TData
39+
}
40+
}
41+
```
42+
43+
Typically query.data will be `TData | undefined` like this code example.
44+
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.
45+
46+
This is why @suspensive/react-query provide **useSuspenseQuery**
47+
48+
## useSuspenseQuery
49+
50+
Return type of this hook have no isLoading, isError property. because Suspense and ErrorBoundary will guarantee this hook's data.
51+
52+
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.
53+
54+
```tsx
55+
import { useSuspenseQuery } from '@suspensive/react-query'
56+
57+
const Example = () => {
58+
const query = useSuspenseQuery(queryKey, queryFn, options) // suspense:true is default.
59+
60+
// No need to do type narrowing by isSuccess
61+
query.data // TData
62+
}
63+
```
64+
65+
### Concentrate on only Success
66+
67+
Now, we can concentrate component as any fetching will be always success in component.
68+
69+
Check the complete documentation on [GitHub](https://github.com/suspensive/react).

‎docs/react/guides/ssr.md‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -302,19 +302,19 @@ ReactDOM.hydrate(
302302

303303
## Using the `app` Directory in Next.js 13
304304

305-
Both prefetching approaches, using `initialData` or `<Hydrate>`, are available within the `app` directory.
305+
Both prefetching approaches, using `initialData` or `<HydrationBoundary>`, are available within the `app` directory.
306306

307307
- Prefetch the data in a Server Component and prop drill `initialData` to Client Components
308308
- Quick to set up for simple cases
309309
- May need to prop drill through multiple layers of Client Components
310310
- May need to prop drill to multiple Client Components using the same query
311311
- Query refetching is based on when the page loads instead of when the data was prefetched on the server
312-
- Prefetch the query on the server, dehydrate the cache and rehydrate it on the client with `<Hydrate>`
312+
- Prefetch the query on the server, dehydrate the cache and rehydrate it on the client with `<HydrationBoundary>`
313313
- Requires slightly more setup up front
314314
- No need to prop drill
315315
- Query refetching is based on when the query was prefetched on the server
316316

317-
### `<QueryClientProvider>` is required by both the `initialData` and `<Hydrate>` prefetching approaches
317+
### `<QueryClientProvider>` is required by both the `initialData` and `<HydrationBoundary>` prefetching approaches
318318

319319
The hooks provided by the `react-query` package need to retrieve a `QueryClient` from their context. Wrap your component tree with `<QueryClientProvider>` and pass it an instance of `QueryClient`.
320320

@@ -379,7 +379,7 @@ export function Posts(props) {
379379
}
380380
```
381381

382-
### Using `<Hydrate>`
382+
### Using `<HydrationBoundary>`
383383

384384
Create a request-scoped singleton instance of `QueryClient`. **This ensures that data is not shared between different users and requests, while still only creating the QueryClient once per request.**
385385

@@ -397,30 +397,33 @@ Fetch your data in a Server Component higher up in the component tree than the C
397397
- Retrieve the `QueryClient` singleton instance
398398
- Prefetch the data using the client's prefetchQuery method and wait for it to complete
399399
- Use `dehydrate` to obtain the dehydrated state of the prefetched queries from the query cache
400-
- Wrap the component tree that needs the prefetched queries inside `<Hydrate>`, and provide it with the dehydrated state
401-
- You can fetch inside multiple Server Components and use `<Hydrate>` in multiple places
400+
- Wrap the component tree that needs the prefetched queries inside `<HydrationBoundary>`, and provide it with the dehydrated state
401+
- You can fetch inside multiple Server Components and use `<HydrationBoundary>` in multiple places
402402

403403
> NOTE: TypeScript currently complains of a type error when using async Server Components. As a temporary workaround, use `{/* @ts-expect-error Server Component */}` when calling this component inside another. For more information, see [End-to-End Type Safety](https://beta.nextjs.org/docs/configuring/typescript#end-to-end-type-safety) in the Next.js 13 beta docs.
404404
405405
```tsx
406406
// app/hydratedPosts.jsx
407-
import { dehydrate, Hydrate } from '@tanstack/react-query'
407+
import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
408408
import getQueryClient from './getQueryClient'
409409

410410
export default async function HydratedPosts() {
411411
const queryClient = getQueryClient()
412-
await queryClient.prefetchQuery(['posts'], getPosts)
412+
413+
await queryClient.prefetchQuery({querykey:['posts'], queryFn:getPosts})
414+
// for infinite queries with useInfiniteQuery use
415+
// await queryClient.prefetchInfiniteQuery({queryKey:['posts'], queryFn:getPosts,...})
413416
const dehydratedState = dehydrate(queryClient)
414417

415418
return (
416-
<Hydrate state={dehydratedState}>
419+
<HydrationBoundary state={dehydratedState}>
417420
<Posts />
418-
</Hydrate>
421+
</HydrationBoundary>
419422
)
420423
}
421424
```
422425

423-
During server rendering, calls to `useQuery` nested within the `<Hydrate>` Client Component will have access to prefetched data provided in the state property.
426+
During server rendering, calls to `useQuery` nested within the `<HydrationBoundary>` Client Component will have access to prefetched data provided in the state property.
424427

425428
```tsx
426429
// app/posts.jsx

‎docs/react/plugins/persistQueryClient.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,10 +212,11 @@ ReactDOM.createRoot(rootElement).render(
212212

213213
- `persistOptions: PersistQueryClientOptions`
214214
- all [options](#options) you can pass to [persistQueryClient](#persistqueryclient) minus the QueryClient itself
215-
- `onSuccess?: () => void`
215+
- `onSuccess?: () => Promise<unknown> | unknown`
216216
- optional
217217
- will be called when the initial restore is finished
218218
- can be used to [resumePausedMutations](../reference/QueryClient#queryclientresumepausedmutations)
219+
- if a Promise is returned, it will be awaited; restoring is seen as ongoing until then
219220

220221
### useIsRestoring
221222

‎docs/react/reference/useQuery.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@ const {
1111
errorUpdatedAt,
1212
failureCount,
1313
failureReason,
14+
fetchStatus,
1415
isError,
1516
isFetched,
1617
isFetchedAfterMount,
1718
isFetching,
18-
isPaused,
19-
isLoading,
2019
isInitialLoading,
20+
isLoading,
2121
isLoadingError,
22+
isPaused,
2223
isPending,
2324
isPlaceholderData,
2425
isRefetchError,
@@ -27,7 +28,6 @@ const {
2728
isSuccess,
2829
refetch,
2930
status,
30-
fetchStatus,
3131
} = useQuery({
3232
queryKey,
3333
queryFn,

‎docs/solid/overview.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -129,20 +129,21 @@ export default function App() {
129129
function Example() {
130130
// ❌ react version -- supports destructing outside reactive context
131131
// const { isPending, error, data } = useQuery({
132-
// queryKey: ['repoData'], () =>
133-
// queryFn: fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
134-
// res.json()
135-
// )
132+
// queryKey: ['repoData'],
133+
// queryFn: () =>
134+
// fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
135+
// (res) => res.json()
136+
// ),
136137
// })
137138

138139
// ✅ solid version -- does not support destructuring outside reactive context
139-
const query = createQuery({
140-
queryKey: () => ['repoData'],
140+
const query = createQuery(() => ({
141+
queryKey: ['repoData'],
141142
queryFn: () =>
142143
fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
143-
(res) => res.json(),
144+
(res) => res.json()
144145
),
145-
})
146+
}))
146147

147148
// ✅ access query properties in JSX reactive context
148149
return (

‎docs/svelte/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ Svelte Query offers useful functions and components that will make managing serv
6464
- `useIsMutating`
6565
- `useHydrate`
6666
- `<QueryClientProvider>`
67-
- `<Hydrate>`
67+
- `<HydrationBoundary>`
6868

6969
## Important Differences between Svelte Query & React Query
7070

‎examples/react/algolia/package.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,21 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"@tanstack/react-query": "^4.7.1",
12-
"@tanstack/react-query-devtools": "^4.7.1",
13-
"@algolia/client-search": "4.11.0",
14-
"@algolia/transporter": "4.11.0",
15-
"algoliasearch": "4.12.2"
11+
"@algolia/client-search": "4.17.1",
12+
"@algolia/transporter": "4.17.1",
13+
"@tanstack/react-query": "^5.0.0-alpha.38",
14+
"@tanstack/react-query-devtools": "^5.0.0-alpha.38",
15+
"algoliasearch": "4.17.1"
1616
},
1717
"devDependencies": {
18-
"@tanstack/eslint-plugin-query": "^4.13.0",
19-
"@vitejs/plugin-react": "^2.0.0",
20-
"vite": "^3.0.0",
18+
"@tanstack/eslint-plugin-query": "^5.0.0-alpha.36",
19+
"@types/react": "^18.2.4",
20+
"@types/react-dom": "^18.2.4",
21+
"@vitejs/plugin-react": "^4.0.0",
2122
"react": "^18.2.0",
2223
"react-dom": "^18.2.0",
23-
"typescript": "^4.7.4",
24-
"@types/react": "^18.0.14",
25-
"@types/react-dom": "^18.0.5"
24+
"typescript": "^5.0.4",
25+
"vite": "^4.2.0"
2626
},
2727
"browserslist": {
2828
"production": [

0 commit comments

Comments
 (0)