feat: rc release (#6058)

.codesandbox/ci.json

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

.eslintrc.cjs

@@ -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',

.github/workflows/ci.yml

@@ -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/pr.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: 'beta'
       - 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

.nvmrc

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

README.md

@@ -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%40beta&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@beta&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">
@@ -51,4 +51,4 @@ Still on **React Query v3**? No problem! Check out the v3 docs here: https://tan
 
 ### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
 
-<!-- Use the force, Luke -->
+<!-- Use the force, Luke! -->

docs/config.json

@@ -164,10 +164,6 @@
               "label": "Suspense",
               "to": "react/guides/suspense"
             },
-            {
-              "label": "Custom Logger",
-              "to": "react/guides/custom-logger"
-            },
             {
               "label": "Testing",
               "to": "react/guides/testing"
@@ -177,12 +173,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"
             }
           ]
         },
@@ -246,6 +246,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 +278,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"
@@ -302,10 +310,6 @@
             {
               "label": "Exhaustive Deps",
               "to": "react/eslint/exhaustive-deps"
-            },
-            {
-              "label": "Prefer object syntax",
-              "to": "react/eslint/prefer-query-object-syntax"
             }
           ]
         },
@@ -327,6 +331,10 @@
             {
               "label": "broadcastQueryClient (Experimental)",
               "to": "react/plugins/broadcastQueryClient"
+            },
+            {
+              "label": "createPersister (Experimental)",
+              "to": "react/plugins/createPersister"
             }
           ]
         },
@@ -357,6 +365,10 @@
               "label": "useIsMutating",
               "to": "react/reference/useIsMutating"
             },
+            {
+              "label": "useMutationState",
+              "to": "react/reference/useMutationState"
+            },
             {
               "label": "QueryClient",
               "to": "react/reference/QueryClient"
@@ -575,8 +587,8 @@
               "to": "vue/guides/suspense"
             },
             {
-              "label": "Custom Logger",
-              "to": "vue/guides/custom-logger"
+              "label": "Testing",
+              "to": "vue/guides/testing"
             },
             {
               "label": "Custom Client",
@@ -585,6 +597,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"
             }
           ]
         },

docs/react/adapters/react-query.md

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

docs/react/adapters/solid-query.md

@@ -13,12 +13,15 @@ import { Switch, Match, For } from 'solid-js'
 const queryClient = new QueryClient()
 
 function Example() {
-  const query = createQuery(() => ['todos'], fetchTodos)
+  const query = createQuery({
+    queryKey: () => ['todos'], 
+    queryFn: fetchTodos
+  })
 
   return (
     <div>
       <Switch>
-        <Match when={query.isLoading}>
+        <Match when={query.isPending}>
           <p>Loading...</p>
         </Match>
         <Match when={query.isError}>
@@ -69,10 +72,16 @@ Solid Query offers an API similar to  React Query, but there are some key differ
 
 ```tsx
 // ❌ react version
-useQuery(["todos", todo], fetchTodos)
+useQuery({
+  queryKey: ["todos", todo], 
+  queryFn: fetchTodos
+})
 
 // ✅ solid version
-createQuery(() => ["todos", todo()], fetchTodos)
+createQuery({
+  queryKey: () => ["todos", todo()], 
+  queryFn: fetchTodos
+})
 ```
 
 - Suspense works for queries out of the box if you access the query data inside a `<Suspense>` boundary.
@@ -81,7 +90,11 @@ createQuery(() => ["todos", todo()], fetchTodos)
 import { For, Suspense } from 'solid-js'
 
 function Example() {
-  const query = createQuery(() => ['todos'], fetchTodos)
+  const query = createQuery({
+    queryKey: () => ['todos'], 
+    queryFn: fetchTodos
+  })
+
   return (
     <div>
       {/* ✅ Will trigger loading fallback, data accessed in a suspense context. */}
@@ -113,25 +126,26 @@ export default function App() {
 
 function Example() {
   // ❌ react version -- supports destructing outside reactive context
-  // const { isLoading, error, data } = useQuery(['repoData'], () =>
-  //   fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
+  // const { isPending, error, data } = useQuery({
+  //   queryKey: ['repoData'], () =>
+  //   queryFn: fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
   //     res.json()
   //   )
-  // )
+  // })
 
   // ✅ solid version -- does not support destructuring outside reactive context
-  const query = createQuery(
-    () => ['repoData'],
-    () =>
+  const query = createQuery({
+    queryKey: () => ['repoData'],
+    queryFn: () =>
       fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
         (res) => res.json(),
       ),
-  )
+  })
 
   // ✅ access query properties in JSX reactive context
   return (
     <Switch>
-      <Match when={query.isLoading}>Loading...</Match>
+      <Match when={query.isPending}>Loading...</Match>
       <Match when={query.isError}>Error: {query.error.message}</Match>
       <Match when={query.isSuccess}>
         <div>
@@ -161,7 +175,9 @@ const queryClient = new QueryClient()
 
 function Example() {
   const [enabled, setEnabled] = createSignal(false)
-  const query = createQuery(() => ['todos'], fetchTodos, {
+  const query = createQuery({ 
+    queryKey: () => ['todos'],
+    queryFn: fetchTodos,
     // ❌ passing a signal directly is not reactive
     // enabled: enabled(),
 
@@ -174,7 +190,7 @@ function Example() {
   return (
     <div>
       <Switch>
-        <Match when={query.isLoading}>
+        <Match when={query.isPending}>
           <p>Loading...</p>
         </Match>
         <Match when={query.isError}>