feat: v5 release (#6163)

BREAKING CHANGE

Author: TkDodo

.browserslistrc

@@ -1,5 +1,6 @@
 {
   "installCommand": "install:csb",
+  "buildCommand": "build:all",
   "sandboxes": [
     "/examples/react/basic-typescript",
     "/examples/solid/basic-typescript",

.codesandbox/ci.json

@@ -1,3 +1,6 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
 const config = {
   root: true,
   parser: '@typescript-eslint/parser',
@@ -15,7 +18,7 @@ const config = {
   },
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: './tsconfig.base.json',
+    project: './tsconfig.json',
     sourceType: 'module',
     ecmaVersion: 2020,
   },
@@ -31,6 +34,7 @@ const config = {
     },
   },
   rules: {
+    '@typescript-eslint/array-type': ['error', { default: 'generic', readonly: 'generic' }],
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/consistent-type-imports': [
@@ -42,6 +46,7 @@ const config = {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-unnecessary-condition': 'error',
+    '@typescript-eslint/no-unnecessary-type-assertion': 'error',
     '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-inferrable-types': [
       'error',

.eslintrc.cjs

@@ -44,7 +44,7 @@ jobs:
       - name: Run Tests
         uses: nick-fields/[email protected]
         with:
-          command: pnpm run test:ci --base=${{ github.event.before }}
+          command: pnpm run test:ci
           timeout_minutes: 10
           max_attempts: 3
       - name: Publish

.github/workflows/ci.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Get appropriate base and head commits for `nx affected` commands
         uses: nrwl/nx-set-shas@v3
         with:
-          main-branch-name: 'main'
+          main-branch-name: 'rc'
       - run: |
           echo "BASE: ${{ env.NX_BASE }}"
           echo "HEAD: ${{ env.NX_HEAD }}"
@@ -46,7 +46,7 @@ jobs:
         with:
           timeout_minutes: 5
           max_attempts: 3
-          command: npx nx affected --targets=test:eslint,test:lib,test:types,test:build
+          command: npx nx affected --targets=test:eslint,test:lib,test:types,test:build,test:bundle
       - name: Stop Agents
         run: npx nx-cloud stop-all-agents
       - name: Upload coverage to Codecov
@@ -97,33 +97,3 @@ jobs:
         run: pnpm --filter "./packages/**" --filter query --prefer-offline install
       - name: Run prettier
         run: pnpm run test:format
-  test-react-17:
-    name: 'Test React 17'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-          ref: ${{ github.head_ref }}
-          repository: ${{github.event.pull_request.head.repo.full_name}}
-      - uses: pnpm/[email protected]
-        with:
-          version: 8
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: .nvmrc
-          cache: pnpm
-          cache-dependency-path: pnpm-lock.yaml
-      - name: Install dependencies
-        run: pnpm --filter "./packages/**" --filter query --prefer-offline install
-      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v2
-      - name: Run Tests
-        uses: nick-fields/[email protected]
-        with:
-          timeout_minutes: 5
-          max_attempts: 3
-          command: npx nx affected --targets=test:lib --base=${{ github.event.pull_request.base.sha }}
-        env:
-          NX_CLOUD_DISTRIBUTED_EXECUTION: false
-          REACTJS_VERSION: 17

.github/workflows/pr.yml

@@ -1 +1 @@
-v16.19.0
+v18.16.0

.nvmrc

@@ -1,6 +1,6 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Query Header](https://github.com/TanStack/query/raw/beta/media/repo-header.png)
+![TanStack Query Header](https://github.com/TanStack/query/raw/rc/media/repo-header.png)
 
 Hooks for fetching, caching and updating asynchronous data in React, Solid, Svelte and Vue
 
@@ -12,8 +12,8 @@ Hooks for fetching, caching and updating asynchronous data in React, Solid, Svel
 <img src="https://github.com/TanStack/query/workflows/react-query%20tests/badge.svg" />
 </a><a href="https://www.npmjs.com/package/@tanstack/query-core" target="\_parent">
   <img alt="" src="https://img.shields.io/npm/dm/@tanstack/query-core.svg" />
-</a><a href="https://bundlephobia.com/package/@tanstack/react-query@latest" target="\_parent">
-  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-query" />
+</a><a href="https://bundlejs.com/?q=%40tanstack%2Freact-query%40rc&config=%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22react%22%2C%22react-dom%22%5D%7D%7D&badge=" target="\_parent">
+  <img alt="" src="https://deno.bundlejs.com/?q=@tanstack/react-query@rc&config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22]}}&badge=detailed" />
 </a><a href="#badge">
     <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
   </a><a href="https://github.com/TanStack/query/discussions">

README.md

@@ -112,10 +112,6 @@
               "label": "Placeholder Query Data",
               "to": "react/guides/placeholder-query-data"
             },
-            {
-              "label": "Prefetching",
-              "to": "react/guides/prefetching"
-            },
             {
               "label": "Mutations",
               "to": "react/guides/mutations"
@@ -149,9 +145,21 @@
               "to": "react/guides/filters"
             },
             {
-              "label": "SSR & Next.js",
+              "label": "Performance & Request Waterfalls",
+              "to": "react/guides/request-waterfalls"
+            },
+            {
+              "label": "Prefetching & Router Integration",
+              "to": "react/guides/prefetching"
+            },
+            {
+              "label": "Server Rendering & Hydration",
               "to": "react/guides/ssr"
             },
+            {
+              "label": "Advanced Server Rendering",
+              "to": "react/guides/advanced-ssr"
+            },
             {
               "label": "Caching",
               "to": "react/guides/caching"
@@ -164,10 +172,6 @@
               "label": "Suspense",
               "to": "react/guides/suspense"
             },
-            {
-              "label": "Custom Logger",
-              "to": "react/guides/custom-logger"
-            },
             {
               "label": "Testing",
               "to": "react/guides/testing"
@@ -177,12 +181,16 @@
               "to": "react/guides/does-this-replace-client-state"
             },
             {
-              "label": "Migrating to React Query 3",
+              "label": "Migrating to v3",
               "to": "react/guides/migrating-to-react-query-3"
             },
             {
-              "label": "Migrating to React Query 4",
+              "label": "Migrating to v4",
               "to": "react/guides/migrating-to-react-query-4"
+            },
+            {
+              "label": "Migrating to v5",
+              "to": "react/guides/migrating-to-v5"
             }
           ]
         },
@@ -235,8 +243,12 @@
               "to": "react/examples/react/auto-refetching"
             },
             {
-              "label": "Optimistic Updates in TypeScript",
-              "to": "react/examples/react/optimistic-updates-typescript"
+              "label": "Optimistic Updates (UI)",
+              "to": "react/examples/react/optimistic-updates-ui"
+            },
+            {
+              "label": "Optimistic Updates (Cache)",
+              "to": "react/examples/react/optimistic-updates-cache"
             },
             {
               "label": "Pagination",
@@ -246,6 +258,10 @@
               "label": "Load-More & Infinite Scroll",
               "to": "react/examples/react/load-more-infinite-scroll"
             },
+            {
+              "label": "Infinite query with Max pages",
+              "to": "react/examples/react/infinite-query-with-max-pages"
+            },
             {
               "label": "Suspense",
               "to": "react/examples/react/suspense"
@@ -274,6 +290,10 @@
               "label": "Next.js",
               "to": "react/examples/react/nextjs"
             },
+            {
+              "label": "Next.js app with streaming",
+              "to": "react/examples/react/nextjs-suspense-streaming"
+            },
             {
               "label": "React Native",
               "to": "react/examples/react/react-native"
@@ -303,10 +323,6 @@
               "label": "Exhaustive Deps",
               "to": "react/eslint/exhaustive-deps"
             },
-            {
-              "label": "Prefer object syntax",
-              "to": "react/eslint/prefer-query-object-syntax"
-            },
             {
               "label": "Stable Query Client",
               "to": "react/eslint/stable-query-client"
@@ -331,6 +347,10 @@
             {
               "label": "broadcastQueryClient (Experimental)",
               "to": "react/plugins/broadcastQueryClient"
+            },
+            {
+              "label": "createPersister (Experimental)",
+              "to": "react/plugins/createPersister"
             }
           ]
         },
@@ -361,6 +381,10 @@
               "label": "useIsMutating",
               "to": "react/reference/useIsMutating"
             },
+            {
+              "label": "useMutationState",
+              "to": "react/reference/useMutationState"
+            },
             {
               "label": "QueryClient",
               "to": "react/reference/QueryClient"
@@ -426,6 +450,35 @@
             {
               "label": "Overview",
               "to": "solid/overview"
+            },
+            {
+              "label": "Devtools",
+              "to": "solid/devtools"
+            }
+          ]
+        },
+        {
+          "label": "Examples",
+          "children": [
+            {
+              "label": "Simple",
+              "to": "solid/examples/solid/simple"
+            },
+            {
+              "label": "Basic",
+              "to": "solid/examples/solid/basic-typescript"
+            },
+            {
+              "label": "Basic w/ GraphQL-Request",
+              "to": "solid/examples/solid/basic-graphql-request"
+            },
+            {
+              "label": "Default Query Function",
+              "to": "solid/examples/solid/default-query-function"
+            },
+            {
+              "label": "Solid Start",
+              "to": "solid/examples/solid/solid-start-streaming"
             }
           ]
         }
@@ -579,8 +632,8 @@
               "to": "vue/guides/suspense"
             },
             {
-              "label": "Custom Logger",
-              "to": "vue/guides/custom-logger"
+              "label": "Testing",
+              "to": "vue/guides/testing"
             },
             {
               "label": "Custom Client",
@@ -589,6 +642,10 @@
             {
               "label": "Does this replace [Vuex, Pinia]?",
               "to": "vue/guides/does-this-replace-client-state"
+            },
+            {
+              "label": "Migrating to v5",
+              "to": "vue/guides/migrating-to-v5"
             }
           ]
         },

babel.config.js

@@ -16,7 +16,7 @@ function Example() {
 
   return (
     <div>
-      {query.isLoading
+      {query.isPending
         ? 'Loading...'
         : query.isError
         ? 'Error!'