Merge branch 'main' into solid-query-docs-fix-suspense-bug

TanStack · Jul 17, 2024 · ab75aed · ab75aed
2 parents 2c8265b + 01212de
commit ab75aed
Show file tree

Hide file tree

Showing 151 changed files with 2,583 additions and 5,696 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -7,7 +7,7 @@ on:
         description: override release tag
         required: false
   push:
-    branches: ['main', 'alpha', 'beta', 'rc', 'v4']
+    branches: [main, alpha, beta, rc, v4]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.number || github.ref }}
@@ -16,6 +16,10 @@ concurrency:
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 
+permissions:
+  contents: write
+  id-token: write
+
 jobs:
   test-and-publish:
     name: Test & Publish
@@ -42,7 +46,7 @@ jobs:
           npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
           pnpm run cipublish
         env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           TAG: ${{ inputs.tag }}
       - name: Upload coverage to Codecov

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -12,6 +12,9 @@ concurrency:
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 
+permissions:
+  contents: read
+
 jobs:
   test:
     name: Test
@@ -28,8 +31,8 @@ jobs:
       - name: Get base and head commits for `nx affected`
         uses: nrwl/nx-set-shas@v4
         with:
-          main-branch-name: 'main'
-      - name: Run Tests
+          main-branch-name: main
+      - name: Run Checks
         run: pnpm run test:pr --parallel=3
       - name: Stop Nx Agents
         if: ${{ always() }}

diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
 link-workspace-packages=true
 prefer-workspace-packages=true
+provenance=true
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v22.2.0
+22.4.0
diff --git a/.pnpmfile.cjs b/.pnpmfile.cjs
@@ -0,0 +1,42 @@
+function readPackage(pkg, context) {
+  // [email protected]
+  if (pkg.name === 'react-scripts' && pkg.version === '4.0.3') {
+    delete pkg.dependencies['@typescript-eslint/eslint-plugin']
+    delete pkg.dependencies['@typescript-eslint/parser']
+    delete pkg.dependencies['babel-eslint']
+    delete pkg.dependencies['babel-jest']
+    delete pkg.dependencies['eslint']
+    delete pkg.dependencies['eslint-config-react-app']
+    delete pkg.dependencies['eslint-plugin-flowtype']
+    delete pkg.dependencies['eslint-plugin-import']
+    delete pkg.dependencies['eslint-plugin-jest']
+    delete pkg.dependencies['eslint-plugin-jsx-a11y']
+    delete pkg.dependencies['eslint-plugin-react']
+    delete pkg.dependencies['eslint-plugin-react-hooks']
+    delete pkg.dependencies['eslint-plugin-testing-library']
+    delete pkg.dependencies['jest']
+    delete pkg.dependencies['jest-circus']
+    delete pkg.dependencies['jest-resolve']
+    delete pkg.dependencies['jest-watch-typeahead']
+    context.log('Removed unused dependencies from [email protected]')
+  }
+
+  // [email protected]
+  if (pkg.name === 'react-scripts' && pkg.version === '5.0.1') {
+    delete pkg.dependencies['babel-jest']
+    delete pkg.dependencies['eslint']
+    delete pkg.dependencies['eslint-config-react-app']
+    delete pkg.dependencies['jest']
+    delete pkg.dependencies['jest-resolve']
+    delete pkg.dependencies['jest-watch-typeahead']
+    context.log('Removed unused dependencies from [email protected]')
+  }
+
+  return pkg
+}
+
+module.exports = {
+  hooks: {
+    readPackage,
+  },
+}
diff --git a/docs/framework/react/comparison.md b/docs/framework/react/comparison.md
@@ -36,7 +36,7 @@ Feature/Capability Key:
 | Infinite Queries                                   | ✅                                       | ✅                                       | ✅                                         | 🛑                                   | 🛑                                                                        |
 | Bi-directional Infinite Queries                    | ✅                                       | 🔶                                       | 🔶                                         | 🛑                                   | 🛑                                                                        |
 | Infinite Query Refetching                          | ✅                                       | ✅                                       | 🛑                                         | 🛑                                   | 🛑                                                                        |
-| Lagged Query Data<sup>1</sup>                      | ✅                                       | ✅                                       | 🛑                                         | ✅                                   | ✅                                                                        |
+| Lagged Query Data<sup>1</sup>                      | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
 | Selectors                                          | ✅                                       | 🛑                                       | ✅                                         | ✅                                   | N/A                                                                       |
 | Initial Data                                       | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
 | Scroll Recovery                                    | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
@@ -48,15 +48,15 @@ Feature/Capability Key:
 | Offline Mutation Support                           | ✅                                       | 🛑                                       | 🟡                                         | 🛑                                   | 🛑                                                                        |
 | Prefetching APIs                                   | ✅                                       | ✅                                       | ✅                                         | ✅                                   | ✅                                                                        |
 | Query Cancellation                                 | ✅                                       | 🛑                                       | 🛑                                         | 🛑                                   | ✅                                                                        |
-| Partial Query Matching<sup>3</sup>                 | ✅                                       | 🔶                                       | 🛑                                         | ✅                                   | N/A                                                                       |
+| Partial Query Matching<sup>3</sup>                 | ✅                                       | 🔶                                       | ✅                                         | ✅                                   | N/A                                                                       |
 | Stale While Revalidate                             | ✅                                       | ✅                                       | ✅                                         | ✅                                   | 🛑                                                                        |
 | Stale Time Configuration                           | ✅                                       | 🛑<sup>7</sup>                           | 🛑                                         | ✅                                   | 🛑                                                                        |
-| Pre-usage Query/Mutation Configuration<sup>4</sup> | ✅                                       | 🛑                                       | 🛑                                         | ✅                                   | ✅                                                                        |
+| Pre-usage Query/Mutation Configuration<sup>4</sup> | ✅                                       | 🛑                                       | ✅                                         | ✅                                   | ✅                                                                        |
 | Window Focus Refetching                            | ✅                                       | ✅                                       | 🛑                                         | ✅                                   | 🛑                                                                        |
 | Network Status Refetching                          | ✅                                       | ✅                                       | ✅                                         | ✅                                   | 🛑                                                                        |
 | General Cache Dehydration/Rehydration              | ✅                                       | 🛑                                       | ✅                                         | ✅                                   | ✅                                                                        |
 | Offline Caching                                    | ✅                                       | 🛑                                       | ✅                                         | 🔶                                   | 🛑                                                                        |
-| React Suspense                                     | ✅                                       | ✅                                       | 🛑                                         | 🛑                                   | ✅                                                                        |
+| React Suspense                                     | ✅                                       | ✅                                       | ✅                                         | 🛑                                   | ✅                                                                        |
 | Abstracted/Agnostic Core                           | ✅                                       | 🛑                                       | ✅                                         | ✅                                   | 🛑                                                                        |
 | Automatic Refetch after Mutation<sup>5</sup>       | 🔶                                       | 🔶                                       | ✅                                         | ✅                                   | ✅                                                                        |
 | Normalized Caching<sup>6</sup>                     | 🛑                                       | 🛑                                       | ✅                                         | 🛑                                   | 🛑                                                                        |

diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md
@@ -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
@@ -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.
@@ -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: {
       // ...
@@ -452,6 +469,8 @@ export function makeQueryClient() {
     },
   })
 }
+
+// ...
 ```
 
 ```tsx
@@ -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({

diff --git a/docs/framework/react/reference/useMutationState.md b/docs/framework/react/reference/useMutationState.md
@@ -38,6 +38,34 @@ const data = useMutationState({
 })
 ```
 
+**Example 3: Access the latest mutation data via the `mutationKey`**
+Each invocation of `mutate` adds a new entry to the mutation cache for `gcTime` milliseconds.
+
+To access the latest invocation, you can check for the last item that `useMutationState` returns.
+
+```tsx
+import { useMutation, useMutationState } from '@tanstack/react-query'
+
+const mutationKey = ['posts']
+
+// Some mutation that we want to get the state for
+const mutation = useMutation({
+  mutationKey,
+  mutationFn: (newPost) => {
+    return axios.post('/posts', newPost)
+  },
+})
+
+const data = useMutationState({
+  // this mutation key needs to match the mutation key of the given mutation (see above)
+  filters: { mutationKey },
+  select: (mutation) => mutation.state.data,
+})
+
+// Latest mutation data
+const latest = data[data.length - 1]
+```
+
 **Options**
 
 - `options`

diff --git a/docs/reference/QueryClient.md b/docs/reference/QueryClient.md
@@ -62,7 +62,7 @@ Its available methods are:
 - `defaultOptions?: DefaultOptions`
   - Optional
   - Define defaults for all queries and mutations using this queryClient.
-  - You can also define defaults to be used for [hydration](../../framework/react/reference/hydration.md)
+  - You can also define defaults to be used for [hydration](../../framework/react/reference/hydration)
 
 ## `queryClient.fetchQuery`
 

diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json
@@ -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.50.2",
+    "@tanstack/angular-query-experimental": "^5.51.4",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -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.50.2",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.4",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/angular/infinite-query-with-max-pages/package.json b/examples/angular/infinite-query-with-max-pages/package.json
@@ -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.50.2",
+    "@tanstack/angular-query-experimental": "^5.51.4",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -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.50.2",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.4",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/angular/router/package.json b/examples/angular/router/package.json
@@ -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.50.2",
+    "@tanstack/angular-query-experimental": "^5.51.4",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -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.50.2",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.4",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/angular/simple/package.json b/examples/angular/simple/package.json
@@ -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.50.2",
+    "@tanstack/angular-query-experimental": "^5.51.4",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -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.50.2",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.4",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/react/algolia/package.json b/examples/react/algolia/package.json
@@ -11,18 +11,18 @@
   "dependencies": {
     "@algolia/client-search": "4.23.3",
     "@algolia/transporter": "4.23.3",
-    "@tanstack/react-query": "^5.50.1",
-    "@tanstack/react-query-devtools": "^5.50.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"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.50.1",
+    "@tanstack/eslint-plugin-query": "^5.51.1",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "typescript": "5.3.3",
-    "vite": "^5.2.11"
+    "vite": "^5.3.3"
   }
 }
diff --git a/examples/react/auto-refetching/package.json b/examples/react/auto-refetching/package.json
@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.50.1",
-    "@tanstack/react-query-devtools": "^5.50.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"

diff --git a/examples/react/basic-graphql-request/package.json b/examples/react/basic-graphql-request/package.json
@@ -8,15 +8,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.50.1",
-    "@tanstack/react-query-devtools": "^5.50.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",
     "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^5.2.11"
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.3"
   }
 }