Merge remote-tracking branch 'upstream/main' into feature/angular-stable

Author: arnoud-dv

.github/workflows/autofix.yml

@@ -24,6 +24,6 @@ jobs:
       - name: Fix formatting
         run: pnpm prettier:write
       - name: Apply fixes
-        uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c
+        uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef
         with:
           commit-message: 'ci: apply automated fixes'

CONTRIBUTING.md

@@ -52,6 +52,63 @@ If you have been assigned to fix an issue or develop a new feature, please follo
 - Git stage your required changes and commit (see below commit guidelines).
 - Submit PR for review.
 
+### Editing the docs locally and previewing the changes
+
+The documentations for all the TanStack projects are hosted on [tanstack.com](https://tanstack.com), which is a TanStack Start application (https://github.com/TanStack/tanstack.com). You need to run this app locally to preview your changes in the `TanStack/query` docs.
+
+> [!NOTE]
+> The website fetches the doc pages from GitHub in production, and searches for them at `../query/docs` in development. Your local clone of `TanStack/query` needs to be in the same directory as the local clone of `TansStack/tanstack.com`.
+
+You can follow these steps to set up the docs for local development:
+
+1. Make a new directory called `tanstack`.
+
+```sh
+mkdir tanstack
+```
+
+2. Enter that directory and clone the [`TanStack/query`](https://github.com/TanStack/query) and [`TanStack/tanstack.com`](https://github.com/TanStack/tanstack.com) repos.
+
+```sh
+cd tanstack
+git clone [email protected]:TanStack/query.git
+# We probably don't need all the branches and commit history
+# from the `tanstack.com` repo, so let's just create a shallow
+# clone of the latest version of the `main` branch.
+# Read more about shallow clones here:
+# https://github.blog/2020-12-21-get-up-to-speed-with-partial-clone-and-shallow-clone/#user-content-shallow-clones
+git clone [email protected]:TanStack/tanstack.com.git --depth=1 --single-branch --branch=main
+```
+
+> [!NOTE]
+> Your `tanstack` directory should look like this:
+>
+> ```
+> tanstack/
+>    |
+>    +-- query/ (<-- this directory cannot be called anything else!)
+>    |
+>    +-- tanstack.com/
+> ```
+
+3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
+
+```sh
+cd tanstack.com
+pnpm i
+# The app will run on https://localhost:3000 by default
+pnpm dev
+```
+
+4. Now you can visit http://localhost:3000/query/latest/docs/overview in the browser and see the changes you make in `tanstack/query/docs` there.
+
+> [!WARNING]
+> You will need to update the `docs/config.json` file (in `TanStack/query`) if you add a new documentation page!
+
+You can see the whole process in the screen capture below:
+
+https://github.com/fulopkovacs/form/assets/43729152/9d35a3c3-8153-4e74-9cb2-af275f7a269b
+
 ### Running examples
 
 - Make sure you've installed the dependencies in the repo's root directory.
@@ -72,10 +129,6 @@ If you have been assigned to fix an issue or develop a new feature, please follo
   pnpm run dev
   ```
 
-#### Note on `examples/react-native`
-
-React Native example requires Expo to work. Please follow the instructions from example's README.md file to learn more.
-
 #### Note on standalone execution
 
 If you want to run an example without installing dependencies for the whole repo, just follow instructions from the example's README.md file. It will be then run against the latest TanStack Query release.

docs/config.json

@@ -99,6 +99,10 @@
               "label": "TypeScript",
               "to": "framework/vue/typescript"
             },
+            {
+              "label": "Reactivity",
+              "to": "framework/vue/reactivity"
+            },
             {
               "label": "GraphQL",
               "to": "framework/vue/graphql"
@@ -116,6 +120,10 @@
               "label": "Installation",
               "to": "framework/svelte/installation"
             },
+            {
+              "label": "Devtools",
+              "to": "framework/svelte/devtools"
+            },
             {
               "label": "SSR & SvelteKit",
               "to": "framework/svelte/ssr"
@@ -141,6 +149,10 @@
               "label": "Quick Start",
               "to": "framework/angular/quick-start"
             },
+            {
+              "label": "Angular HttpClient and other data fetching clients",
+              "to": "framework/angular/angular-httpclient-and-other-data-fetching-clients"
+            },
             {
               "label": "Devtools",
               "to": "framework/angular/devtools"
@@ -1050,6 +1062,10 @@
               "label": "Auto Refetching / Polling / Realtime",
               "to": "framework/angular/examples/auto-refetching"
             },
+            {
+              "label": "Optimistic Updates",
+              "to": "framework/angular/examples/optimistic-updates"
+            },
             {
               "label": "Pagination",
               "to": "framework/angular/examples/pagination"

docs/eslint/eslint-plugin-query.md

@@ -93,8 +93,8 @@ Alternatively, add `@tanstack/query` to the plugins section, and configure the r
 
 ## Rules
 
-- [@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)
-- [@tanstack/query/infinite-query-property-order](../infinite-query-property-order)
+- [@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)
+- [@tanstack/query/infinite-query-property-order](./infinite-query-property-order)

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

@@ -0,0 +1,48 @@
+---
+id: Angular-HttpClient-and-other-data-fetching-clients
+title: Angular HttpClient and other data fetching clients
+---
+
+Because TanStack Query's fetching mechanisms are agnostically built on Promises, you can use literally any asynchronous data fetching client, including the browser native `fetch` API, `graphql-request`, and more.
+
+## Using Angular's `HttpClient` for data fetching
+
+`HttpClient` is a powerful and integrated part of Angular, which gives the following benefits:
+
+- 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.
+- 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`
+
+As TanStack Query is a promise based library, observables from `HttpClient` need to be converted to promises. This can be done with the `lastValueFrom` or `firstValueFrom` functions from `rxjs`.
+
+```ts
+@Component({
+  // ...
+})
+class ExampleComponent {
+  private readonly http = inject(HttpClient)
+
+  readonly query = injectQuery(() => ({
+    queryKey: ['repoData'],
+    queryFn: () =>
+      lastValueFrom(
+        this.http.get('https://api.github.com/repos/tanstack/query'),
+      ),
+  }))
+}
+```
+
+> Since Angular is moving towards RxJS as an optional dependency, it's expected that `HttpClient` will also support promises in the future.
+>
+> Support for observables in TanStack Query for Angular is planned.
+
+## Comparison table
+
+| Data fetching client                                | Pros                                                | Cons                                                                       |
+| --------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------------------------------- |
+| **Angular HttpClient**                              | Featureful and very well integrated with Angular.   | Observables need to be converted to Promises.                              |
+| **Fetch**                                           | Browser native API, so adds nothing to bundle size. | Barebones API which lacks many features.                                   |
+| **Specialized libraries such as `graphql-request`** | Specialized features for specific use cases.        | If it's not an Angular library it won't integrate well with the framework. |

docs/framework/angular/guides/background-fetching-indicators.md

@@ -8,27 +8,23 @@ ref: docs/framework/react/guides/background-fetching-indicators.md
 
 ```angular-ts
 @Component({
-  selector: 'posts',
+  selector: 'todos',
   template: `
-    @switch (query.status()) {
-      @case ('pending') {
-        Loading...
+    @if (todosQuery.isPending()) {
+      Loading...
+    } @else if (todosQuery.isError()) {
+      An error has occurred: {{ todosQuery.error().message }}
+    } @else if (todosQuery.isSuccess()) {
+      @if (todosQuery.isFetching()) {
+        Refreshing...
       }
-      @case ('error') {
-        An error has occurred: {{ query.error()?.message }}
-      }
-      @default {
-        @if (query.isFetching()) {
-          Refreshing...
-        }
-        @for (todo of query.data()) {
-          <todo [todo]="todo" />
-        }
+      @for (todos of todosQuery.data(); track todo.id) {
+        <todo [todo]="todo" />
       }
     }
   `,
 })
-export class TodosComponent {
+class TodosComponent {
   todosQuery = injectQuery(() => ({
     queryKey: ['todos'],
     queryFn: fetchTodos,

docs/framework/angular/guides/disabling-queries.md

@@ -70,6 +70,8 @@ export class TodosComponent {
 [//]: # 'Example3'
 
 ```angular-ts
+import { skipToken, injectQuery } from '@tanstack/query-angular'
+
 @Component({
   selector: 'todos',
   template: `

docs/framework/angular/guides/queries.md

@@ -10,6 +10,7 @@ replace:
     'custom hooks': 'services',
     'the `useQuery` hook': '`injectQuery`',
     '`useQuery`': '`injectQuery`',
+    "TypeScript will also narrow the type of data correctly if you've checked for pending and error before accessing it.": 'TypeScript will only narrow the type when checking boolean signals such as `isPending` and `isError`.',
   }
 ---
 

docs/framework/angular/guides/query-options.md

@@ -31,14 +31,28 @@ export class QueriesService {
 
 // usage:
 
+postId = input.required({
+  transform: numberAttribute,
+})
 queries = inject(QueriesService)
 
-injectQuery(this.queries.post(1))
-injectQueries({
-  queries: [this.queries.post(1), this.queries.post(2)],
-})
+postQuery = injectQuery(() => this.queries.post(this.postId()))
+
 queryClient.prefetchQuery(this.queries.post(23))
-queryClient.setQueryData(this.queries.post(42).queryKey, newGroups)
+queryClient.setQueryData(this.queries.post(42).queryKey, newPost)
 ```
 
 [//]: # 'Example1'
+[//]: # 'Example2'
+
+```ts
+// Type inference still works, so query.data will be the return type of select instead of queryFn
+queries = inject(QueriesService)
+
+query = injectQuery(() => ({
+  ...groupOptions(1),
+  select: (data) => data.title,
+}))
+```
+
+[//]: # 'Example2'

docs/framework/angular/guides/window-focus-refetching.md

@@ -8,7 +8,7 @@ replace: { '@tanstack/react-query': '@tanstack/angular-query' }
 [//]: # 'Example'
 
 ```ts
-bootstrapApplication(AppComponent, {
+export const appConfig: ApplicationConfig = {
   providers: [
     provideTanStackQuery(
       new QueryClient({
@@ -20,7 +20,7 @@ bootstrapApplication(AppComponent, {
       }),
     ),
   ],
-})
+}
 ```
 
 [//]: # 'Example'

docs/framework/react/community/community-projects.md

@@ -61,6 +61,13 @@ A tool for generating code based on an OpenAPI schema.
 
 Link: https://github.com/fabien0102/openapi-codegen
 
+## OpenAPI Qraft React
+
+Generate type-safe API clients and Hooks for TanStack Query directly from OpenAPI Documents.
+Zero-runtime overhead, Proxy-based design, seamless SSR support, and full TanStack Query functionality.
+
+Link: https://github.com/OpenAPI-Qraft/openapi-qraft
+
 ## OpenAPI React Query codegen
 
 Generate TanStack Query hooks based on an OpenAPI specification file.

docs/framework/react/guides/advanced-ssr.md

@@ -5,15 +5,17 @@ title: Advanced Server Rendering
 
 Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router.
 
-You might want to read the [Server Rendering & Hydration guide](../ssr) before this one as it teaches the basics for using React Query with SSR, and [Performance & Request Waterfalls](../request-waterfalls) as well as [Prefetching & Router Integration](../prefetching) also contains valuable background.
+You might want to read the [Server Rendering & Hydration guide](./ssr) before this one as it teaches the basics for using React Query with SSR, and [Performance & Request Waterfalls](./request-waterfalls) as well as [Prefetching & Router Integration](./prefetching) also contains valuable background.
+
+https://tanstack.com/query/latest/docs/framework/react/guides/ssr
 
 Before we start, let's note that while the `initialData` approach outlined in the SSR guide also works with Server Components, we'll focus this guide on the hydration APIs.
 
 ## Server Components & Next.js app router
 
 We won't cover Server Components in depth here, but the short version is that they are components that are guaranteed to _only_ run on the server, both for the initial page view and **also on page transitions**. This is similar to how Next.js `getServerSideProps`/`getStaticProps` and Remix `loader` works, as these also always run on the server but while those can only return data, Server Components can do a lot more. The data part is central to React Query however, so let's focus on that.
 
-How do we take what we learned in the Server Rendering guide about [passing data prefetched in framework loaders to the app](../ssr#using-the-hydration-apis) and apply that to Server Components and the Next.js app router? The best way to start thinking about this is to consider Server Components as "just" another framework loader.
+How do we take what we learned in the Server Rendering guide about [passing data prefetched in framework loaders to the app](./ssr#using-the-hydration-apis) and apply that to Server Components and the Next.js app router? The best way to start thinking about this is to consider Server Components as "just" another framework loader.
 
 ### A quick note on terminology
 
@@ -392,6 +394,14 @@ function makeQueryClient() {
         shouldDehydrateQuery: (query) =>
           defaultShouldDehydrateQuery(query) ||
           query.state.status === 'pending',
+        shouldRedactErrors: (error) => {
+          // We should not catch Next.js server errors
+          // as that's how Next.js detects dynamic pages
+          // so we cannot redact them.
+          // Next.js also automatically redacts errors for us
+          // with better digests.
+          return false
+        },
       },
     },
   })
@@ -593,7 +603,7 @@ For more information, check out the [NextJs Suspense Streaming Example](../../ex
 
 The big upside is that you no longer need to prefetch queries manually to have SSR work, and it even still streams in the result! This gives you phenomenal DX and lower code complexity.
 
-The downside is easiest to explain if we look back at [the complex request waterfall example](../request-waterfalls#code-splitting) in the Performance & Request Waterfalls guide. Server Components with prefetching effectively eliminates the request waterfalls both for the initial page load **and** any subsequent navigation. This prefetch-less approach however will only flatten the waterfalls on the initial page load but ends up the same deep waterfall as the original example on page navigations:
+The downside is easiest to explain if we look back at [the complex request waterfall example](./request-waterfalls#code-splitting) in the Performance & Request Waterfalls guide. Server Components with prefetching effectively eliminates the request waterfalls both for the initial page load **and** any subsequent navigation. This prefetch-less approach however will only flatten the waterfalls on the initial page load but ends up the same deep waterfall as the original example on page navigations:
 
 ```
 1. |> JS for <Feed>

docs/framework/react/guides/caching.md

@@ -3,7 +3,7 @@ id: caching
 title: Caching Examples
 ---
 
-> Please thoroughly read the [Important Defaults](../important-defaults) before reading this guide
+> Please thoroughly read the [Important Defaults](./important-defaults) before reading this guide
 
 ## Basic Example
 
@@ -23,7 +23,7 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default
 - A second instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts elsewhere.
   - Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
   - The new instance triggers a new network request using its query function.
-    - Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../../reference/useQuery) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
+    - Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../reference/useQuery) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
   - When the request completes successfully, the cache's data under the `['todos']` key is updated with the new data, and both instances are updated with the new data.
 - Both instances of the `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` query are unmounted and no longer in use.
   - Since there are no more active instances of this query, a garbage collection timeout is set using `gcTime` to delete and garbage collect the query (defaults to **5 minutes**).

docs/framework/react/guides/important-defaults.md

@@ -36,7 +36,7 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul
 
 Have a look at the following articles from our Community Resources for further explanations of the defaults:
 
-- [Practical React Query](../../community/tkdodos-blog#1-practical-react-query)
-- [React Query as a State Manager](../../community/tkdodos-blog#10-react-query-as-a-state-manager)
+- [Practical React Query](../community/tkdodos-blog#1-practical-react-query)
+- [React Query as a State Manager](../community/tkdodos-blog#10-react-query-as-a-state-manager)
 
 [//]: # 'Materials'

docs/framework/react/guides/initial-query-data.md

@@ -170,6 +170,6 @@ const result = useQuery({
 
 ## Further reading
 
-For a comparison between `Initial Data` and `Placeholder Data`, have a look at the [Community Resources](../../community/tkdodos-blog#9-placeholder-and-initial-data-in-react-query).
+For a comparison between `Initial Data` and `Placeholder Data`, have a look at the [Community Resources](../community/tkdodos-blog#9-placeholder-and-initial-data-in-react-query).
 
 [//]: # 'Materials'