.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

.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() }}
@@ -40,3 +43,17 @@ jobs:
           directory: packages
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+  preview:
+    name: Preview
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Tools
+        uses: tanstack/config/.github/setup@main
+      - name: Build Packages
+        run: pnpm run build:all
+      - name: Publish Previews
+        run: pnpx pkg-pr-new publish --pnpm --compact './packages/*' --template './examples/*/*'

.npmrc

@@ -1,2 +1,3 @@
 link-workspace-packages=true
 prefer-workspace-packages=true
+provenance=true

.nvmrc

@@ -1 +1 @@
-v22.2.0
+22.4.0

docs/config.json

@@ -903,7 +903,7 @@
             },
             {
               "label": "Basic",
-              "to": "framework/solid/examples/basic-typescript"
+              "to": "framework/solid/examples/basic"
             },
             {
               "label": "Basic w/ GraphQL-Request",

docs/eslint/eslint-plugin-query.md

@@ -82,5 +82,5 @@ Alternatively, add `@tanstack/eslint-plugin-query` to the plugins section, and c
 ## Rules
 
 - [@tanstack/query/exhaustive-deps](../exhaustive-deps)
-- [@tanstack/query/no-rest-destructuring](../exhaustive-deps)
-- [@tanstack/query/stable-query-client](../exhaustive-deps)
+- [@tanstack/query/no-rest-destructuring](../no-rest-destructuring)
+- [@tanstack/query/stable-query-client](../stable-query-client)

docs/framework/react/guides/prefetching.md

@@ -196,7 +196,7 @@ This starts fetching `'article-comments'` immediately and flattens the waterfall
 
 [//]: # 'Suspense'
 
-If you want to prefetch together with Suspense, you will have to do things a bit differently. You can't use `useSuspenseQueries` to prefetch, since the prefetch would block the component from rendering. You also can not use `useQuery` for the prefetch, because that wouldn't start the prefetch until after suspenseful query had resolved. For this scenario, you can use the [`usePrefetchQuery`](../reference/usePrefetchQuery) or the [`usePrefetchInfiniteQuery`](../reference/usePrefetchInfiniteQuery) hooks available in the library.
+If you want to prefetch together with Suspense, you will have to do things a bit differently. You can't use `useSuspenseQueries` to prefetch, since the prefetch would block the component from rendering. You also can not use `useQuery` for the prefetch, because that wouldn't start the prefetch until after suspenseful query had resolved. For this scenario, you can use the [`usePrefetchQuery`](../../reference/usePrefetchQuery) or the [`usePrefetchInfiniteQuery`](../../reference/usePrefetchInfiniteQuery) hooks available in the library.
 
 You can now use `useSuspenseQuery` in the component that actually needs the data. You _might_ want to wrap this later component in its own `<Suspense>` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data.
 
@@ -378,7 +378,7 @@ Because data fetching in the component tree itself can easily lead to request wa
 
 In this approach, you explicitly declare for each _route_ what data is going to be needed for that component tree, ahead of time. Because Server Rendering has traditionally needed all data to be loaded before rendering starts, this has been the dominating approach for SSR'd apps for a long time. This is still a common approach and you can read more about it in the [Server Rendering & Hydration guide](../ssr).
 
-For now, let's focus on the client side case and look at an example of how you can make this work with [Tanstack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full React Query example](https://tanstack.com/router/v1/docs/examples/react/with-react-query?file=src%2Fmain.tsx) over in the [Tanstack Router docs](https://tanstack.com/router/v1/docs).
+For now, let's focus on the client side case and look at an example of how you can make this work with [Tanstack Router](https://tanstack.com/router). These examples leave out a lot of setup and boilerplate to stay concise, you can check out a [full React Query example](https://tanstack.com/router/v1/docs/framework/react/examples/basic-react-query-file-based) over in the [Tanstack Router docs](https://tanstack.com/router/v1/docs).
 
 When integrating at the router level, you can choose to either _block_ rendering of that route until all data is present, or you can start a prefetch but not await the result. That way, you can start rendering the route as soon as possible. You can also mix these two approaches and await some critical data, but start rendering before all the secondary data has finished loading. In this example, we'll configure an `/article` route to not render until the article data has finished loading, as well as start prefetching comments as soon as possible, but not block rendering the route if comments haven't finished loading yet.
 

docs/framework/vue/community/community-projects.md

@@ -12,3 +12,9 @@ There are lots of community projects that build on top of Vue Query and use it t
 A library for creating typesafe standardized query keys, useful for cache management in `@tanstack/query`
 
 Link: https://github.com/lukemorales/query-key-factory
+
+## Query Rewind
+
+Time travel and visualize state during development
+
+Link: https://reactqueryrewind.com/

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.1",
+    "@tanstack/angular-query-experimental": "^5.51.1",
     "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.1",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.1",
     "typescript": "5.3.3"
   }
 }

examples/angular/infinite-query-with-max-pages/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@tanstack/query-example-angular-infinite-query-with-max-pages",
-  "version": "0.0.0",
+  "private": true,
+  "type": "module",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development"
   },
-  "private": true,
   "dependencies": {
     "@angular/common": "^17.3.10",
     "@angular/compiler": "^17.3.10",
     "@angular/core": "^17.3.10",
     "@angular/platform-browser": "^17.3.10",
     "@angular/platform-browser-dynamic": "^17.3.10",
-    "@tanstack/angular-query-experimental": "^5.50.1",
+    "@tanstack/angular-query-experimental": "^5.51.1",
     "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.1",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.1",
     "typescript": "5.3.3"
   }
 }

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.1",
+    "@tanstack/angular-query-experimental": "^5.51.1",
     "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.1",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.1",
     "typescript": "5.3.3"
   }
 }

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.1",
+    "@tanstack/angular-query-experimental": "^5.51.1",
     "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.1",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.1",
     "typescript": "5.3.3"
   }
 }

examples/react/algolia/package.json

@@ -11,30 +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.1",
+    "@tanstack/react-query-devtools": "^5.51.1",
     "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",
     "typescript": "5.3.3",
     "vite": "^5.2.11"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

examples/react/auto-refetching/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/react/auto-refetching/next.config.js

@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig

examples/react/auto-refetching/package.json

@@ -8,12 +8,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.50.1",
-    "@tanstack/react-query-devtools": "^5.50.1",
-    "axios": "^1.6.8",
-    "isomorphic-unfetch": "4.0.2",
+    "@tanstack/react-query": "^5.51.1",
+    "@tanstack/react-query-devtools": "^5.51.1",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }

examples/react/auto-refetching/src/pages/api/data.js → examples/react/auto-refetching/src/pages/api/data.ts

@@ -1,7 +1,12 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
 // an simple endpoint for getting current list
 let list = ['Item 1', 'Item 2', 'Item 3']
 
-export default async (req, res) => {
+export default async (
+  req: NextApiRequest,
+  res: NextApiResponse<typeof list>,
+) => {
   if (req.query.add) {
     if (!list.includes(req.query.add)) {
       list.push(req.query.add)

examples/react/auto-refetching/src/pages/index.js → examples/react/auto-refetching/src/pages/index.tsx

@@ -1,14 +1,11 @@
 import React from 'react'
-import axios from 'axios'
-
-//
 
 import {
-  useQuery,
-  useQueryClient,
-  useMutation,
   QueryClient,
   QueryClientProvider,
+  useMutation,
+  useQuery,
+  useQueryClient,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
@@ -29,16 +26,16 @@ function Example() {
 
   const { status, data, error, isFetching } = useQuery({
     queryKey: ['todos'],
-    queryFn: async () => {
-      const res = await axios.get('/api/data')
-      return res.data
+    queryFn: async (): Promise<Array<string>> => {
+      const response = await fetch('/api/data')
+      return await response.json()
     },
     // Refetch the data every second
     refetchInterval: intervalMs,
   })
 
   const addMutation = useMutation({
-    mutationFn: (add) => fetch(`/api/data?add=${add}`),
+    mutationFn: (add: string) => fetch(`/api/data?add=${add}`),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
   })
 
@@ -52,7 +49,7 @@ function Example() {
 
   return (
     <div>
-      <h1>Auto Refetch with stale-time set to 1s)</h1>
+      <h1>Auto Refetch with stale-time set to {intervalMs}ms</h1>
       <p>
         This example is best experienced on your own machine, where you can open
         multiple tabs to the same localhost server and see your changes

examples/react/auto-refetching/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/react/basic-graphql-request/index.html

@@ -11,6 +11,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>