Merge branch 'main' into mutationInDeps

Author: TkDodo

README.md

@@ -8,8 +8,6 @@ Hooks for fetching, caching and updating asynchronous data in React, Solid, Svel
   <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
 </a><a href="https://discord.com/invite/WrRKjPJ" target="\_parent">
   <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" />
-</a><a href="https://github.com/TanStack/query/actions?query=workflow%3A%22react-query+tests%22">
-<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://bundlejs.com/?q=%40tanstack%2Freact-query&config=%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22react%22%2C%22react-dom%22%5D%7D%7D&badge=" target="\_parent">

docs/eslint/eslint-plugin-query.md

@@ -11,11 +11,23 @@ The plugin is a separate package that you need to install:
 
 ```bash
 $ npm i -D @tanstack/eslint-plugin-query
-# or
+```
+
+or
+
+```bash
 $ pnpm add -D @tanstack/eslint-plugin-query
-# or
+```
+
+or
+
+```bash
 $ yarn add -D @tanstack/eslint-plugin-query
-# or
+```
+
+or
+
+```bash
 $ bun add -D @tanstack/eslint-plugin-query
 ```
 

docs/framework/angular/devtools.md

@@ -9,11 +9,23 @@ The devtools are a separate package that you need to install:
 
 ```bash
 $ npm i @tanstack/angular-query-devtools-experimental
-# or
+```
+
+or
+
+```bash
 $ pnpm add @tanstack/angular-query-devtools-experimental
-# or
+```
+
+or
+
+```bash
 $ yarn add @tanstack/angular-query-devtools-experimental
-# or
+```
+
+or
+
+```bash
 $ bun add @tanstack/angular-query-devtools-experimental
 ```
 
@@ -62,4 +74,4 @@ import { Component } from '@angular/core';
   - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
 - `shadowDOMTarget?: ShadowRoot`
   - Default behavior will apply the devtool's styles to the head tag within the DOM.
-  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instad of within the head tag in the light DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.

docs/framework/angular/installation.md

@@ -11,11 +11,23 @@ _Angular Query is compatible with Angular v16 and higher_
 
 ```bash
 npm i @tanstack/angular-query-experimental
-# or
+```
+
+or
+
+```bash
 pnpm add @tanstack/angular-query-experimental
-# or
+```
+
+or
+
+```bash
 yarn add @tanstack/angular-query-experimental
-# or
+```
+
+or
+
+```bash
 bun add @tanstack/angular-query-experimental
 ```
 

docs/framework/react/devtools.md

@@ -21,11 +21,23 @@ The devtools are a separate package that you need to install:
 
 ```bash
 $ npm i @tanstack/react-query-devtools
-# or
+```
+
+or
+
+```bash
 $ pnpm add @tanstack/react-query-devtools
-# or
+```
+
+or
+
+```bash
 $ yarn add @tanstack/react-query-devtools
-# or
+```
+
+or
+
+```bash
 $ bun add @tanstack/react-query-devtools
 ```
 

docs/framework/react/guides/request-waterfalls.md

@@ -118,8 +118,8 @@ const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({
     { queryKey: ['users'], queryFn: fetchUsers },
     { queryKey: ['teams'], queryFn: fetchTeams },
     { queryKey: ['projects'], queryFn: fetchProjects },
-  ]
-}
+  ],
+})
 ```
 
 ### Nested Component Waterfalls

docs/framework/react/installation.md

@@ -11,11 +11,23 @@ or a good ol' `<script>` via
 
 ```bash
 npm i @tanstack/react-query
-# or
+```
+
+or
+
+```bash
 pnpm add @tanstack/react-query
-# or
+```
+
+or
+
+```bash
 yarn add @tanstack/react-query
-# or
+```
+
+or
+
+```bash
 bun add @tanstack/react-query
 ```
 
@@ -58,10 +70,22 @@ It is recommended to also use our [ESLint Plugin Query](../../../eslint/eslint-p
 
 ```bash
 npm i -D @tanstack/eslint-plugin-query
-# or
+```
+
+or
+
+```bash
 pnpm add -D @tanstack/eslint-plugin-query
-# or
+```
+
+or
+
+```bash
 yarn add -D @tanstack/eslint-plugin-query
-# or
+```
+
+or
+
+```bash
 bun add -D @tanstack/eslint-plugin-query
 ```

docs/framework/solid/devtools.md

@@ -13,11 +13,23 @@ The devtools are a separate package that you need to install:
 
 ```bash
 $ npm i @tanstack/solid-query-devtools
-# or
+```
+
+or
+
+```bash
 $ pnpm add @tanstack/solid-query-devtools
-# or
+```
+
+or
+
+```bash
 $ yarn add @tanstack/solid-query-devtools
-# or
+```
+
+or
+
+```bash
 $ bun add @tanstack/solid-query-devtools
 ```
 
@@ -66,4 +78,4 @@ function App() {
   - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
 - `shadowDOMTarget?: ShadowRoot`
   - Default behavior will apply the devtool's styles to the head tag within the DOM.
-  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instad of within the head tag in the light DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.

docs/framework/solid/installation.md

@@ -11,11 +11,23 @@ or a good ol' `<script>` via
 
 ```bash
 npm i @tanstack/solid-query
-# or
+```
+
+or
+
+```bash
 pnpm add @tanstack/solid-query
-# or
+```
+
+or
+
+```bash
 yarn add @tanstack/solid-query
-# or
+```
+
+or
+
+```bash
 bun add @tanstack/solid-query
 ```
 

docs/framework/svelte/installation.md

@@ -11,11 +11,23 @@ You can install Svelte Query via [NPM](https://npmjs.com).
 
 ```bash
 npm i @tanstack/svelte-query
-# or
+```
+
+or
+
+```bash
 pnpm add @tanstack/svelte-query
-# or
+```
+
+or
+
+```bash
 yarn add @tanstack/svelte-query
-# or
+```
+
+or
+
+```bash
 bun add @tanstack/svelte-query
 ```
 

docs/framework/svelte/reactivity.md

@@ -3,7 +3,7 @@ id: reactivity
 title: Reactivity
 ---
 
-Svelte uses a compiler to build your code which optimises rendering. By default, components run once, unless they are referenced in your markup. To be able to react to changes in options you need to use [stores](https://svelte.dev/docs/svelte-store).
+Svelte uses a compiler to build your code which optimizes rendering. By default, components run once, unless they are referenced in your markup. To be able to react to changes in options you need to use [stores](https://svelte.dev/docs/svelte-store).
 
 In the below example, the `refetchInterval` option is set from the variable `intervalMs`, which is bound to the input field. However, as the query is not able to react to changes in `intervalMs`, `refetchInterval` will not change when the input value changes.
 

docs/framework/vue/devtools.md

@@ -16,11 +16,23 @@ The devtools component is a separate package that you need to install:
 
 ```bash
 $ npm i @tanstack/vue-query-devtools
-# or
+```
+
+or
+
+```bash
 $ pnpm add @tanstack/vue-query-devtools
-# or
+```
+
+or
+
+```bash
 $ yarn add @tanstack/vue-query-devtools
-# or
+```
+
+or
+
+```bash
 $ bun add @tanstack/vue-query-devtools
 ```
 

docs/framework/vue/installation.md

@@ -9,11 +9,23 @@ You can install Vue Query via [NPM](https://npmjs.com).
 
 ```bash
 npm i @tanstack/vue-query
-# or
+```
+
+or
+
+```bash
 pnpm add @tanstack/vue-query
-# or
+```
+
+or
+
+```bash
 yarn add @tanstack/vue-query
-# or
+```
+
+or
+
+```bash
 bun add @tanstack/vue-query
 ```
 

eslint.config.js

@@ -3,6 +3,7 @@
 // @ts-ignore Needed due to moduleResolution Node vs Bundler
 import { tanstackConfig } from '@tanstack/config/eslint'
 import pluginCspell from '@cspell/eslint-plugin'
+import vitest from '@vitest/eslint-plugin'
 
 export default [
   ...tanstackConfig,
@@ -40,4 +41,13 @@ export default [
       'no-case-declarations': 'off',
     },
   },
+  {
+    files: ['**/*.spec.ts*', '**/*.test.ts*', '**/*.test-d.ts*'],
+    plugins: { vitest },
+    rules: {
+      ...vitest.configs.recommended.rules,
+      'vitest/expect-expect': 'warn',
+    },
+    settings: { vitest: { typecheck: true } },
+  },
 ]

examples/angular/basic/package.json

@@ -14,7 +14,7 @@
     "@angular/core": "^17.3.12",
     "@angular/platform-browser": "^17.3.12",
     "@angular/platform-browser-dynamic": "^17.3.12",
-    "@tanstack/angular-query-experimental": "^5.51.22",
+    "@tanstack/angular-query-experimental": "^5.51.24",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "^0.14.8"
@@ -23,7 +23,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.12",
-    "@tanstack/angular-query-devtools-experimental": "^5.51.22",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.24",
     "typescript": "5.3.3"
   }
 }

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

@@ -14,7 +14,7 @@
     "@angular/core": "^17.3.12",
     "@angular/platform-browser": "^17.3.12",
     "@angular/platform-browser-dynamic": "^17.3.12",
-    "@tanstack/angular-query-experimental": "^5.51.22",
+    "@tanstack/angular-query-experimental": "^5.51.24",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "^0.14.8"
@@ -23,7 +23,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.12",
-    "@tanstack/angular-query-devtools-experimental": "^5.51.22",
+    "@tanstack/angular-query-devtools-experimental": "^5.51.24",
     "typescript": "5.3.3"
   }
 }