Skip to content

Commit

Permalink
Merge 'main' into zhihengGet/main
Browse files Browse the repository at this point in the history
  • Loading branch information
@lachlancollins
lachlancollins committed Jul 17, 2024
2 parents cae27db + 01212de commit ee98bef
Show file tree
Hide file tree
Showing 107 changed files with 563 additions and 439 deletions.
30 changes: 25 additions & 5 deletions docs/framework/react/guides/advanced-ssr.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,9 @@ With the prefetching patterns described above, React Query is perfectly compatib

As of React Query v5.40.0, you don't have to `await` all prefetches for this to work, as `pending` Queries can also be dehydrated and sent to the client. This lets you kick off prefetches as early as possible without letting them block an entire Suspense boundary, and streams the _data_ to the client as the query finishes. This can be useful for example if you want to prefetch some content that is only visible after some user interaction, or say if you want to `await` and render the first page of an infinite query, but start prefetching page 2 without blocking rendering.

To make this work, we have to instruct the `queryClient` to also `dehydrate` pending Queries. We can do this globally, or by passing that option directly to `hydrate`:
To make this work, we have to instruct the `queryClient` to also `dehydrate` pending Queries. We can do this globally, or by passing that option directly to `hydrate`.

We will also need to move the `getQueryClient()` function out of our `app/providers.jsx` file as we want to use it in our server component and our client provider.

```tsx
// app/get-query-client.ts
Expand All @@ -378,15 +380,30 @@ function makeQueryClient() {
staleTime: 60 * 1000,
},
dehydrate: {
// per default, only successful Queries are included,
// this includes pending Queries as well
// include pending queries in dehydration
shouldDehydrateQuery: (query) =>
defaultShouldDehydrateQuery(query) ||
query.state.status === 'pending',
},
},
})
}

let browserQueryClient: QueryClient | undefined = undefined

export function getQueryClient() {
if (isServer) {
// Server: always make a new query client
return makeQueryClient()
} else {
// Browser: make a new query client if we don't already have one
// This is very important, so we don't re-make a new client if React
// suspends during the initial render. This may not be needed if we
// have a suspense boundary BELOW the creation of the query client
if (!browserQueryClient) browserQueryClient = makeQueryClient()
return browserQueryClient
}
}
```

> Note: This works in NextJs and Server Components because React can serialize Promises over the wire when you pass them down to Client Components.
Expand Down Expand Up @@ -439,7 +456,7 @@ If you're using non-JSON data types and serialize the query results on the serve
import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query'
import { deserialize, serialize } from './transformer'

export function makeQueryClient() {
function makeQueryClient() {
return new QueryClient({
defaultOptions: {
// ...
Expand All @@ -452,6 +469,8 @@ export function makeQueryClient() {
},
})
}

// ...
```

```tsx
Expand All @@ -461,11 +480,12 @@ import {
HydrationBoundary,
QueryClient,
} from '@tanstack/react-query'
import { getQueryClient } from './get-query-client'
import { serialize } from './transformer'
import Posts from './posts'

export default function PostsPage() {
const queryClient = new QueryClient()
const queryClient = getQueryClient()

// look ma, no await
queryClient.prefetchQuery({
Expand Down
4 changes: 2 additions & 2 deletions examples/angular/basic/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@angular/core": "^17.3.10",
"@angular/platform-browser": "^17.3.10",
"@angular/platform-browser-dynamic": "^17.3.10",
"@tanstack/angular-query-experimental": "^5.51.1",
"@tanstack/angular-query-experimental": "^5.51.4",
"rxjs": "^7.8.1",
"tslib": "^2.6.2",
"zone.js": "^0.14.6"
Expand All @@ -23,7 +23,7 @@
"@angular-devkit/build-angular": "^17.3.8",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.3.10",
"@tanstack/angular-query-devtools-experimental": "^5.51.1",
"@tanstack/angular-query-devtools-experimental": "^5.51.4",
"typescript": "5.3.3"
}
}
4 changes: 2 additions & 2 deletions examples/angular/infinite-query-with-max-pages/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@angular/core": "^17.3.10",
"@angular/platform-browser": "^17.3.10",
"@angular/platform-browser-dynamic": "^17.3.10",
"@tanstack/angular-query-experimental": "^5.51.1",
"@tanstack/angular-query-experimental": "^5.51.4",
"rxjs": "^7.8.1",
"tslib": "^2.6.2",
"zone.js": "^0.14.6"
Expand All @@ -23,7 +23,7 @@
"@angular-devkit/build-angular": "^17.3.8",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.3.10",
"@tanstack/angular-query-devtools-experimental": "^5.51.1",
"@tanstack/angular-query-devtools-experimental": "^5.51.4",
"typescript": "5.3.3"
}
}
4 changes: 2 additions & 2 deletions examples/angular/router/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@angular/platform-browser": "^17.3.10",
"@angular/platform-browser-dynamic": "^17.3.10",
"@angular/router": "^17.3.10",
"@tanstack/angular-query-experimental": "^5.51.1",
"@tanstack/angular-query-experimental": "^5.51.4",
"rxjs": "^7.8.1",
"tslib": "^2.6.2",
"zone.js": "^0.14.6"
Expand All @@ -24,7 +24,7 @@
"@angular-devkit/build-angular": "^17.3.8",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.3.10",
"@tanstack/angular-query-devtools-experimental": "^5.51.1",
"@tanstack/angular-query-devtools-experimental": "^5.51.4",
"typescript": "5.3.3"
}
}
4 changes: 2 additions & 2 deletions examples/angular/simple/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@angular/platform-browser": "^17.3.10",
"@angular/platform-browser-dynamic": "^17.3.10",
"@angular/router": "^17.3.10",
"@tanstack/angular-query-experimental": "^5.51.1",
"@tanstack/angular-query-experimental": "^5.51.4",
"rxjs": "^7.8.1",
"tslib": "^2.6.2",
"zone.js": "^0.14.6"
Expand All @@ -24,7 +24,7 @@
"@angular-devkit/build-angular": "^17.3.8",
"@angular/cli": "^17.3.8",
"@angular/compiler-cli": "^17.3.10",
"@tanstack/angular-query-devtools-experimental": "^5.51.1",
"@tanstack/angular-query-devtools-experimental": "^5.51.4",
"typescript": "5.3.3"
}
}
4 changes: 2 additions & 2 deletions examples/react/algolia/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
"dependencies": {
"@algolia/client-search": "4.23.3",
"@algolia/transporter": "4.23.3",
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"algoliasearch": "4.23.3",
"react": "19.0.0-rc-4c2e457c7c-20240522",
"react-dom": "19.0.0-rc-4c2e457c7c-20240522"
Expand Down
4 changes: 2 additions & 2 deletions examples/react/auto-refetching/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"start": "next start"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"next": "^14.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
4 changes: 2 additions & 2 deletions examples/react/basic-graphql-request/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"graphql": "^16.8.1",
"graphql-request": "^7.0.1",
"react": "19.0.0-rc-4c2e457c7c-20240522",
Expand Down
8 changes: 4 additions & 4 deletions examples/react/basic/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
"test:types": "tsc"
},
"dependencies": {
"@tanstack/query-sync-storage-persister": "^5.51.1",
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query-persist-client": "^5.51.1",
"@tanstack/query-sync-storage-persister": "^5.51.4",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"@tanstack/react-query-persist-client": "^5.51.4",
"react": "19.0.0-rc-4c2e457c7c-20240522",
"react-dom": "19.0.0-rc-4c2e457c7c-20240522"
},
Expand Down
4 changes: 2 additions & 2 deletions examples/react/default-query-function/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"react": "19.0.0-rc-4c2e457c7c-20240522",
"react-dom": "19.0.0-rc-4c2e457c7c-20240522"
},
Expand Down
4 changes: 2 additions & 2 deletions examples/react/infinite-query-with-max-pages/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"start": "next start"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"next": "^14.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
4 changes: 2 additions & 2 deletions examples/react/load-more-infinite-scroll/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"start": "next start"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"next": "^14.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
4 changes: 2 additions & 2 deletions examples/react/nextjs-app-prefetching/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"test:types": "tsc"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"next": "^15.0.0-rc.0",
"react": "19.0.0-rc-4c2e457c7c-20240522",
"react-dom": "19.0.0-rc-4c2e457c7c-20240522"
Expand Down
6 changes: 3 additions & 3 deletions examples/react/nextjs-suspense-streaming/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
"test:types": "tsc"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query-next-experimental": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"@tanstack/react-query-next-experimental": "^5.51.4",
"next": "^14.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
4 changes: 2 additions & 2 deletions examples/react/nextjs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"start": "next start"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"next": "^14.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
8 changes: 4 additions & 4 deletions examples/react/offline/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/query-sync-storage-persister": "^5.51.1",
"@tanstack/query-sync-storage-persister": "^5.51.4",
"@tanstack/react-location": "^3.7.4",
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query-persist-client": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"@tanstack/react-query-persist-client": "^5.51.4",
"msw": "^2.3.0",
"react": "19.0.0-rc-4c2e457c7c-20240522",
"react-dom": "19.0.0-rc-4c2e457c7c-20240522",
Expand Down
4 changes: 2 additions & 2 deletions examples/react/optimistic-updates-cache/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"test:types": "tsc"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"next": "^14.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
4 changes: 2 additions & 2 deletions examples/react/optimistic-updates-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"start": "next start"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"next": "^14.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
4 changes: 2 additions & 2 deletions examples/react/pagination/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"start": "next start"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"next": "^14.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
4 changes: 2 additions & 2 deletions examples/react/playground/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"react": "19.0.0-rc-4c2e457c7c-20240522",
"react-dom": "19.0.0-rc-4c2e457c7c-20240522"
},
Expand Down
4 changes: 2 additions & 2 deletions examples/react/prefetching/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"start": "next start"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"next": "^14.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
4 changes: 2 additions & 2 deletions examples/react/react-native/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"@react-native-community/netinfo": "^11.3.1",
"@react-navigation/native": "^6.1.6",
"@react-navigation/stack": "^6.3.16",
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"expo": "^51.0.8",
"expo-constants": "^16.0.1",
"expo-status-bar": "^1.12.1",
Expand Down
4 changes: 2 additions & 2 deletions examples/react/react-router/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"test:types": "tsc"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"localforage": "^1.10.0",
"match-sorter": "^6.3.4",
"react": "19.0.0-rc-4c2e457c7c-20240522",
Expand Down
4 changes: 2 additions & 2 deletions examples/react/rick-morty/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.18",
"@mui/styles": "^5.15.18",
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"react": "19.0.0-rc-4c2e457c7c-20240522",
"react-dom": "19.0.0-rc-4c2e457c7c-20240522",
"react-router": "^6.23.1",
Expand Down
4 changes: 2 additions & 2 deletions examples/react/shadow-dom/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"react": "19.0.0-rc-4c2e457c7c-20240522",
"react-dom": "19.0.0-rc-4c2e457c7c-20240522"
},
Expand Down
4 changes: 2 additions & 2 deletions examples/react/simple/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"preview": "vite preview"
},
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@tanstack/react-query-devtools": "^5.51.1",
"@tanstack/react-query": "^5.51.4",
"@tanstack/react-query-devtools": "^5.51.4",
"react": "19.0.0-rc-4c2e457c7c-20240522",
"react-dom": "19.0.0-rc-4c2e457c7c-20240522"
},
Expand Down
Loading

0 comments on commit ee98bef

Please sign in to comment.