Merge branch 'main' of https://github.com/TanStack/query into refactor/resolveValueOrFunction

Author: braden-w

.github/workflows/pr.yml

@@ -65,7 +65,7 @@ jobs:
         run: |
           echo "COMMIT_SHA=${{ github.event.pull_request.head.sha || github.sha }}" >> $GITHUB_ENV
       - name: Preview Bundle Size
-        uses: marocchino/sticky-pull-request-comment@9c40848920de7cd32a71773ba792d8b04f03bf7a
+        uses: marocchino/sticky-pull-request-comment@a071bc9e79df3f13d7cd94d06ab2ef1ec959e9fa
         with:
           message: |
             Sizes for commit ${{ env.COMMIT_SHA }}:

README.md

@@ -1,74 +1,98 @@
 <img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Query Header](https://github.com/TanStack/query/raw/main/media/repo-header.png)
-
-Hooks for fetching, caching and updating asynchronous data in React, Solid, Svelte and Vue
-
-<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
-  <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://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">
-  <img alt="" src="https://deno.bundlejs.com/?q=@tanstack/react-query&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">
-  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
-</a><a href="https://bestofjs.org/projects/tanstack-query"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Fquery%26since=daily" /></a><a href="https://github.com/TanStack/query/" target="\_parent">
-  <img alt="" src="https://img.shields.io/github/stars/TanStack/query.svg?style=social&label=Star" />
-</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
-  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
-</a> <a href="https://gitpod.io/from-referrer/">
-  <img src="https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod" alt="Gitpod Ready-to-Code"/>
+<div align="center">
+  <img src="./media/header_query.png" alt="TanStack Query" />
+</div>
+
+<br />
+
+<div align="center">
+<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" alt="npm downloads" />
+</a>
+ <a href="https://github.com/TanStack/query/" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/TanStack/query.svg?style=social&label=Star" alt="GitHub stars" />
+</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">
+  <img alt="" src="https://deno.bundlejs.com/?q=@tanstack/react-query&config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22]}}&badge=detailed" alt="Bundle size" />
 </a>
+</div>
+
+<div align="center">
+<a href="#badge">
+    <img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="semantic-release">
+  </a>
+<a href="https://bestofjs.org/projects/tanstack-query"><img src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Fquery%26since=daily" alt="Best of JS" /></a>
+  <a href="https://twitter.com/tan_stack"><img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/></a>
+</div>
+
+<div align="center">
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+</div>
 
-Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [TanStack Table](https://github.com/TanStack/table), [TanStack Router](https://github.com/tanstack/router), [TanStack Virtual](https://github.com/tanstack/virtual), [React Charts](https://github.com/TanStack/react-charts), [React Ranger](https://github.com/TanStack/ranger)
+# TanStack Query
 
-## Visit [tanstack.com/query](https://tanstack.com/query) for docs, guides, API and more!
+An async state management library built to simplify fetching, caching, synchronizing, and updating server state.
 
-Still on **React Query v2**? No problem! Check out the v2 docs here: https://github.com/TanStack/query/tree/2.x/docs/src/pages/docs.<br />
-Still on **React Query v3**? No problem! Check out the v3 docs here: https://tanstack.com/query/v3/docs/.<br />
-Still on **React Query v4**? No problem! Check out the v4 docs here: https://tanstack.com/query/v4/docs/.
+- Protocol‑agnostic fetching (REST, GraphQL, promises, etc.)
+- Caching, refetching, pagination & infinite scroll
+- Mutations, dependent queries & background updates
+- Prefetching, cancellation & React Suspense support
 
-## Quick Features
+### <a href="https://tanstack.com/query">Read the docs →</b></a>
 
-- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
-- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
-- Parallel + Dependent Queries
-- Mutations + Reactive Query Refetching
-- Multi-layer Cache + Automatic Garbage Collection
-- Paginated + Cursor-based Queries
-- Load-More + Infinite Scroll Queries w/ Scroll Recovery
-- Request Cancellation
-- [React Suspense](https://react.dev/reference/react/Suspense) + Fetch-As-You-Render Query Prefetching
-- Dedicated Devtools
+## Get Involved
+
+- We welcome issues and pull requests!
+- Participate in [GitHub discussions](https://github.com/TanStack/query/discussions)
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
+- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
 
 ## Partners
 
-<a href="https://www.speakeasy.com/product/react-query?utm_source=tanstack&utm_campaign=tanstack">
-  <picture>
-    <source
-      srcset="https://tanstack.com/assets/speakeasy-dark-BjP-Hd9M.svg"
-      media="(prefers-color-scheme: dark)"
-    />
-    <source
-      srcset="https://tanstack.com/assets/speakeasy-light-UpY7QmwQ.svg"
-      media="(prefers-color-scheme: light)"
-    />
-    <!-- fallback -->
-    <img
-      src="https://tanstack.com/assets/speakeasy-light-UpY7QmwQ.svg"
-      alt="Speakeasy Logo"
-    />
-  </picture>
-</a>
+<table align="center">
+  <tr>
+    <td>
+        <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS">
+          <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" padding="20px" alt="Code Rabbit"/>
+        </a>
+    </td>
+    <td padding="20">
+      <a href="https://www.cloudflare.com?utm_source=tanstack">
+         <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="70" alt="Cloudflare"/>
+      </a>
+    </td>
+  </tr>
+  
+</table>
 
-## Contributing
+<div align="center">
+<img src="./media/partner_logo.svg" alt="Query & you?" height="65">
+<p>
+We're looking for TanStack Query Partners to join our mission! Partner with us to push the boundaries of TanStack Query and build amazing things together.
+</p>
+<a href="mailto:[email protected]?subject=TanStack Query Partnership"><b>LET'S CHAT</b></a>
+</div>
 
-View the contributing guidelines [here](/CONTRIBUTING.md)
+</div>
 
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+## Explore the TanStack Ecosystem
+
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching <br/>
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
+
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
 
 <!-- Use the force, Luke -->

codecov.yml

@@ -19,10 +19,6 @@ comment:
 
 component_management:
   individual_components:
-    - component_id: angular-query-devtools-experimental
-      name: '@tanstack/angular-query-devtools-experimental'
-      paths:
-        - packages/angular-query-devtools-experimental/**
     - component_id: angular-query-experimental
       name: '@tanstack/angular-query-experimental'
       paths:

docs/config.json

@@ -757,6 +757,10 @@
         {
           "label": "notifyManager",
           "to": "reference/notifyManager"
+        },
+        {
+          "label": "timeoutManager",
+          "to": "reference/timeoutManager"
         }
       ],
       "frameworks": [

docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md

@@ -11,7 +11,7 @@ Because TanStack Query's fetching mechanisms are agnostically built on Promises,
 
 - Mock responses in unit tests using [provideHttpClientTesting](https://angular.dev/guide/http/testing).
 - [Interceptors](https://angular.dev/guide/http/interceptors) can be used for a wide range of functionality including adding authentication headers, performing logging, etc. While some data fetching libraries have their own interceptor system, `HttpClient` interceptors are integrated with Angular's dependency injection system.
-- `HttpClient` automatically informs [`PendingTasks`](https://angular.dev/api/core/PendingTasks#), which enables Angular to be aware of pending requests. Unit tests and SSR can use the resulting application _stableness_ information to wait for pending requests to finish. This makes unit testing much easier for [Zoneless](https://angular.dev/guide/experimental/zoneless) applications.
+- `HttpClient` automatically informs [`PendingTasks`](https://angular.dev/api/core/PendingTasks#), which enables Angular to be aware of pending requests. Unit tests and SSR can use the resulting application _stableness_ information to wait for pending requests to finish. This makes unit testing much easier for [Zoneless](https://angular.dev/guide/zoneless) applications.
 - When using SSR, `HttpClient` will [cache requests](https://angular.dev/guide/ssr#caching-data-when-using-HttpClient) performed on the server. This will prevent unneeded requests on the client. `HttpClient` SSR caching works out of the box. TanStack Query has its own hydration functionality which may be more powerful but requires some setup. Which one fits your needs best depends on your use case.
 
 ### Using observables in `queryFn`

docs/framework/angular/devtools.md

@@ -13,27 +13,38 @@ title: Devtools
 
 The devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`.
 
-By default, the devtools are enabled when Angular [`isDevMode`](https://angular.dev/api/core/isDevMode) returns true. So you don't need to worry about excluding them during a production build. The core tools are lazily loaded and excluded from bundled code. In most cases, all you'll need to do is add `withDevtools()` to `provideTanStackQuery` without any additional configuration.
+By default, Angular Query Devtools are only included in development mode bundles, so you don't need to worry about excluding them during a production build.
 
 ```ts
 import {
   QueryClient,
   provideTanStackQuery,
-  withDevtools,
 } from '@tanstack/angular-query-experimental'
 
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
+
 export const appConfig: ApplicationConfig = {
   providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
 }
 ```
 
-## Configuring if devtools are loaded
+## Devtools in production
 
-If you need more control over when devtools are loaded, you can use the `loadDevtools` option. This is particularly useful if you want to load devtools based on environment configurations. For instance, you might have a test environment running in production mode but still require devtools to be available.
+Devtools are automatically excluded from production builds. However, it might be desirable to lazy load the devtools in production.
 
-When not setting the option or setting it to 'auto', the devtools will be loaded when Angular is in development mode.
+To use `withDevtools` in production builds, import using the `production` sub-path. The function exported from the production subpath is identical to the main one, but won't be excluded from production builds.
 
 ```ts
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
+```
+
+To control when devtools are loaded, you can use the `loadDevtools` option.
+
+When not setting the option or setting it to 'auto', the devtools will be loaded automatically only when Angular runs in development mode.
+
+```ts
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
+
 provideTanStackQuery(new QueryClient(), withDevtools())
 
 // which is equivalent to
@@ -45,10 +56,16 @@ provideTanStackQuery(
 
 When setting the option to true, the devtools will be loaded in both development and production mode.
 
+This is useful if you want to load devtools based on [Angular environment configurations](https://angular.dev/tools/cli/environments). E.g. you could set this to true when the application is running on your production build staging environment.
+
 ```ts
+import { environment } from './environments/environment'
+// Make sure to use the production sub-path to load devtools in production builds
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
+
 provideTanStackQuery(
   new QueryClient(),
-  withDevtools(() => ({ loadDevtools: true })),
+  withDevtools(() => ({ loadDevtools: environment.loadDevtools })),
 )
 ```
 
@@ -61,44 +78,66 @@ provideTanStackQuery(
 )
 ```
 
-The `withDevtools` options are returned from a callback function to support reactivity through signals. In the following example
-a signal is created from a RxJS observable that listens for a keyboard shortcut. When the event is triggered, the devtools are lazily loaded.
-Using this technique allows you to support on-demand loading of the devtools even in production mode, without including the full tools in the bundled code.
+## Derive options through reactivity
+
+Options are passed to `withDevtools` from a callback function to support reactivity through signals. In the following example
+a signal is created from a RxJS observable that emits on a keyboard shortcut. When the derived signal is set to true, the devtools are lazily loaded.
+
+The example below always loads devtools in development mode and loads on-demand in production mode when a keyboard shortcut is pressed.
 
 ```ts
+import { Injectable, isDevMode } from '@angular/core'
+import { fromEvent, map, scan } from 'rxjs'
+import { toSignal } from '@angular/core/rxjs-interop'
+
 @Injectable({ providedIn: 'root' })
-class DevtoolsOptionsManager {
+export class DevtoolsOptionsManager {
   loadDevtools = toSignal(
     fromEvent<KeyboardEvent>(document, 'keydown').pipe(
       map(
         (event): boolean =>
           event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D',
       ),
-      scan((acc, curr) => acc || curr, false),
+      scan((acc, curr) => acc || curr, isDevMode()),
     ),
     {
-      initialValue: false,
+      initialValue: isDevMode(),
     },
   )
 }
+```
+
+If you want to use an injectable such as a service in the callback you can use `deps`. The injected value will be passed as parameter to the callback function.
+
+This is similar to `deps` in Angular's [`useFactory`](https://angular.dev/guide/di/dependency-injection-providers#factory-providers-usefactory) provider.
+
+```ts
+// ...
+// 👇 Note we import from the production sub-path to enable devtools lazy loading in production builds
+import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(),
     provideTanStackQuery(
       new QueryClient(),
-      withDevtools(() => ({
-        initialIsOpen: true,
-        loadDevtools: inject(DevtoolsOptionsManager).loadDevtools(),
-      })),
+      withDevtools(
+        (devToolsOptionsManager: DevtoolsOptionsManager) => ({
+          loadDevtools: devToolsOptionsManager.loadDevtools(),
+        }),
+        {
+          // `deps` is used to inject and pass `DevtoolsOptionsManager` to the `withDevtools` callback.
+          deps: [DevtoolsOptionsManager],
+        },
+      ),
     ),
   ],
 }
 ```
 
-### Options
+### Options returned from the callback
 
-Of these options `client`, `position`, `errorTypes`, `buttonPosition`, and `initialIsOpen` support reactivity through signals.
+Of these options `loadDevtools`, `client`, `position`, `errorTypes`, `buttonPosition`, and `initialIsOpen` support reactivity through signals.
 
 - `loadDevtools?: 'auto' | boolean`
   - Defaults to `auto`: lazily loads devtools when in development mode. Skips loading in production mode.
@@ -121,3 +160,5 @@ Of these options `client`, `position`, `errorTypes`, `buttonPosition`, and `init
 - `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 instead of within the head tag in the light DOM.
+- `hideDisabledQueries?: boolean`
+  - Set this to true to hide disabled queries from the devtools panel.