Merge branch 'main' into dogpawhat/expert-query-boundary-reset-function

docs/config.json

@@ -1038,13 +1038,21 @@
               "label": "Basic",
               "to": "framework/angular/examples/basic"
             },
+            {
+              "label": "Pagination",
+              "to": "framework/angular/examples/pagination"
+            },
             {
               "label": "Infinite query with Max pages",
               "to": "framework/angular/examples/infinite-query-with-max-pages"
             },
             {
               "label": "Angular Router",
               "to": "framework/angular/examples/router"
+            },
+            {
+              "label": "RxJS autocomplete",
+              "to": "framework/angular/examples/rxjs"
             }
           ]
         }

docs/eslint/eslint-plugin-query.md

@@ -70,17 +70,17 @@ export default [
 
 ### Recommended setup
 
-To enable all of the recommended rules for our plugin, add `plugin:@tanstack/eslint-plugin-query/recommended` in extends:
+To enable all of the recommended rules for our plugin, add `plugin:@tanstack/query/recommended` in extends:
 
 ```json
 {
-  "extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]
+  "extends": ["plugin:@tanstack/query/recommended"]
 }
 ```
 
 ### Custom setup
 
-Alternatively, add `@tanstack/eslint-plugin-query` to the plugins section, and configure the rules you want to use:
+Alternatively, add `@tanstack/query` to the plugins section, and configure the rules you want to use:
 
 ```json
 {
@@ -96,4 +96,4 @@ Alternatively, add `@tanstack/eslint-plugin-query` to the plugins section, and c
 - [@tanstack/query/exhaustive-deps](../exhaustive-deps)
 - [@tanstack/query/no-rest-destructuring](../no-rest-destructuring)
 - [@tanstack/query/stable-query-client](../stable-query-client)
-- [@tanstack/query/no-unstable-deps](../no-unstable-deps.md)
+- [@tanstack/query/no-unstable-deps](../no-unstable-deps)

docs/eslint/stable-query-client.md

@@ -48,7 +48,7 @@ function App() {
 }
 ```
 
-```
+```tsx
 async function App() {
   const queryClient = new QueryClient()
   await queryClient.prefetchQuery(options)

docs/framework/react/guides/mutations.md

@@ -226,15 +226,15 @@ There is a slight difference in handling `onSuccess`, `onError` and `onSettled`
 ```tsx
 useMutation({
   mutationFn: addTodo,
-  onSuccess: (data, error, variables, context) => {
+  onSuccess: (data, variables, context) => {
     // Will be called 3 times
   },
 })
 
 const todos = ['Todo 1', 'Todo 2', 'Todo 3']
 todos.forEach((todo) => {
   mutate(todo, {
-    onSuccess: (data, error, variables, context) => {
+    onSuccess: (data, variables, context) => {
       // Will execute only once, for the last mutation (Todo 3),
       // regardless which mutation resolves first
     },

docs/framework/react/guides/ssr.md

@@ -520,7 +520,7 @@ Amazing, we've mostly flattened our waterfalls! There's a catch though. Let's ca
 
 This is because with SPA's, server rendering only works for the initial page load, not for any subsequent navigation.
 
-Modern frameworks often tries to solve this by fetching the initial code and data in parallel, so if you were using Next.js or Remix with the prefetching patterns we outlined in this guide, including how to prefetch dependent queries, it would actually look like this instead:
+Modern frameworks often try to solve this by fetching the initial code and data in parallel, so if you were using Next.js or Remix with the prefetching patterns we outlined in this guide, including how to prefetch dependent queries, it would actually look like this instead:
 
 ```
 1. |> JS for <Feed>

docs/framework/react/guides/suspense.md

@@ -8,6 +8,7 @@ React Query can also be used with React's Suspense for Data Fetching API's. For
 - [useSuspenseQuery](../../reference/useSuspenseQuery)
 - [useSuspenseInfiniteQuery](../../reference/useSuspenseInfiniteQuery)
 - [useSuspenseQueries](../../reference/useSuspenseQueries)
+- Additionally, you can use the `useQuery().promise` and `React.use()` (Experimental)
 
 When using suspense mode, `status` states and `error` objects are not needed and are then replaced by usage of the `React.Suspense` component (including the use of the `fallback` prop and React error boundaries for catching errors). Please read the [Resetting Error Boundaries](#resetting-error-boundaries) and look at the [Suspense Example](https://stackblitz.com/github/TanStack/query/tree/main/examples/react/suspense) for more information on how to set up suspense mode.
 
@@ -172,3 +173,52 @@ export function Providers(props: { children: React.ReactNode }) {
 ```
 
 For more information, check out the [NextJs Suspense Streaming Example](../../examples/nextjs-suspense-streaming) and the [Advanced Rendering & Hydration](../advanced-ssr) guide.
+
+## Using `useQuery().promise` and `React.use()` (Experimental)
+
+> To enable this feature, you need to set the `experimental_prefetchInRender` option to `true` when creating your `QueryClient`
+
+**Example code:**
+
+```tsx
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      experimental_prefetchInRender: true,
+    },
+  },
+})
+```
+
+**Usage:**
+
+```tsx
+import React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { fetchTodos, type Todo } from './api'
+
+function TodoList({ query }: { query: UseQueryResult<Todo[]> }) {
+  const data = React.use(query.promise)
+
+  return (
+    <ul>
+      {data.map((todo) => (
+        <li key={todo.id}>{todo.title}</li>
+      ))}
+    </ul>
+  )
+}
+
+export function App() {
+  const query = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+
+  return (
+    <>
+      <h1>Todos</h1>
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <TodoList query={query} />
+      </React.Suspense>
+    </>
+  )
+}
+```

docs/framework/react/reference/hydration.md

@@ -33,7 +33,7 @@ const dehydratedState = dehydrate(queryClient, {
   - `shouldDehydrateQuery: (query: Query) => boolean`
     - Optional
     - Whether to dehydrate queries.
-    - The function, it is called for each query in the cache
+    - The function is called for each query in the cache
       - Return `true` to include this query in dehydration, or `false` otherwise
     - Defaults to only including successful queries
     - If you would like to extend the function while retaining the default behavior, import and execute `defaultShouldDehydrateQuery` as part of the return statement

docs/framework/react/reference/queryOptions.md

@@ -17,3 +17,8 @@ You can generally pass everything to `queryOptions` that you can also pass to [`
 - `queryKey: QueryKey`
   - **Required**
   - The query key to generate options for.
+- `experimental_prefetchInRender?: boolean`
+  - Optional
+  - Defaults to `false`
+  - When set to `true`, queries will be prefetched during render, which can be useful for certain optimization scenarios
+  - Needs to be turned on for the experimental `useQuery().promise` functionality

docs/framework/react/reference/useInfiniteQuery.md

@@ -11,6 +11,7 @@ const {
   hasPreviousPage,
   isFetchingNextPage,
   isFetchingPreviousPage,
+  promise,
   ...result
 } = useInfiniteQuery({
   queryKey,
@@ -85,5 +86,9 @@ The returned properties for `useInfiniteQuery` are identical to the [`useQuery`
   - Is the same as `isFetching && !isPending && !isFetchingNextPage && !isFetchingPreviousPage`
 - `isRefetchError: boolean`
   - Will be `true` if the query failed while refetching a page.
+- `promise: Promise<TData>`
+  - A stable promise that resolves to the query result.
+  - This can be used with `React.use()` to fetch data
+  - Requires the `experimental_prefetchInRender` feature flag to be enabled on the `QueryClient`.
 
 Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default refetch behaviour, resulting in outdated data. Make sure to call these functions only in response to user actions, or add conditions like `hasNextPage && !isFetching`.

docs/framework/react/reference/useQueries.md

@@ -64,4 +64,4 @@ The `combine` function will only re-run if:
 - the `combine` function itself changed referentially
 - any of the query results changed
 
-This means that an inlined `combine` function, as shown above, will run on every render. To avoid this, you can wrap the `combine` function in `useCallback`, or extract it so a stable function reference if it doesn't have any dependencies.
+This means that an inlined `combine` function, as shown above, will run on every render. To avoid this, you can wrap the `combine` function in `useCallback`, or extract it to a stable function reference if it doesn't have any dependencies.

docs/framework/react/reference/useQuery.md

@@ -26,6 +26,7 @@ const {
   isRefetching,
   isStale,
   isSuccess,
+  promise,
   refetch,
   status,
 } = useQuery(
@@ -244,3 +245,6 @@ const {
     - Defaults to `true`
       - Per default, a currently running request will be cancelled before a new request is made
     - When set to `false`, no refetch will be made if there is already a request running.
+- `promise: Promise<TData>`
+  - A stable promise that will be resolved with the data of the query.
+  - Requires the `experimental_prefetchInRender` feature flag to be enabled on the `QueryClient`.

examples/angular/basic/README.md

@@ -1,4 +1,4 @@
-# Angular Query basic example
+# TanStack Query Angular basic example
 
 To run this example:
 

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

examples/angular/basic/src/app/app.config.ts

@@ -7,7 +7,6 @@ import type { ApplicationConfig } from '@angular/core'
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideHttpClient(withFetch()),
     provideAngularQuery(
       new QueryClient({
         defaultOptions: {
@@ -17,5 +16,6 @@ export const appConfig: ApplicationConfig = {
         },
       }),
     ),
+    provideHttpClient(withFetch()),
   ],
 }

examples/angular/basic/src/app/components/post.component.html

@@ -2,10 +2,10 @@
   <div>
     <a (click)="setPostId.emit(-1)" href="#"> Back </a>
   </div>
-  @if (postQuery.status() === 'pending') {
+  @if (postQuery.isPending()) {
     Loading...
-  } @else if (postQuery.status() === 'error') {
-    Error: {{ postQuery.error()?.message }}
+  } @else if (postQuery.isError()) {
+    Error: {{ postQuery.error().message }}
   }
   @if (postQuery.data(); as post) {
     <h1>{{ post.title }}</h1>

examples/angular/basic/src/index.html

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Angular Query basic example</title>
+    <title>TanStack Query Angular basic example</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <basic-example />
+    <basic-example></basic-example>
   </body>
 </html>

examples/angular/infinite-query-with-max-pages/README.md

@@ -1,4 +1,4 @@
-# Angular Query infinite query example
+# TanStack Query Angular infinite query example
 
 To run this example:
 

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

@@ -10,7 +10,7 @@
   },
   "newProjectRoot": "projects",
   "projects": {
-    "basic": {
+    "infinite-query-with-max-pages": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -47,7 +47,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/basic",
+            "outputPath": "dist/infinite-query-with-max-pages",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": ["zone.js"],
@@ -84,18 +84,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "basic:build:production"
+              "buildTarget": "infinite-query-with-max-pages:build:production"
             },
             "development": {
-              "buildTarget": "basic:build:development"
+              "buildTarget": "infinite-query-with-max-pages:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "buildTarget": "basic:build"
+            "buildTarget": "infinite-query-with-max-pages:build"
           }
         }
       }

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

examples/angular/infinite-query-with-max-pages/src/app/app.config.ts

@@ -12,7 +12,6 @@ import type { ApplicationConfig } from '@angular/core'
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideHttpClient(withInterceptors([projectsMockInterceptor]), withFetch()),
     provideAngularQuery(
       new QueryClient({
         defaultOptions: {
@@ -22,5 +21,6 @@ export const appConfig: ApplicationConfig = {
         },
       }),
     ),
+    provideHttpClient(withInterceptors([projectsMockInterceptor]), withFetch()),
   ],
 }

examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts

@@ -8,7 +8,7 @@ import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimen
 import { injectInfiniteQuery } from '@tanstack/angular-query-experimental'
 import { lastValueFrom } from 'rxjs'
 import { ProjectStyleDirective } from '../directives/project-style.directive'
-import { ProjectsService } from '../services/projects-service'
+import { ProjectsService } from '../services/projects.service'
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

examples/angular/infinite-query-with-max-pages/src/index.html

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Angular Query infinite query example</title>
+    <title>TanStack Query Angular infinite query example</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <app-root />
+    <app-root></app-root>
   </body>
 </html>

examples/angular/pagination/README.md

@@ -0,0 +1,6 @@
+# TanStack Query Angular pagination example
+
+To run this example:
+
+- `npm install` or `yarn` or `pnpm i` or `bun i`
+- `npm run start` or `yarn start` or `pnpm start` or `bun start`