fix(angular-query): support inject(QueryClient) (#8292)

* fix(angular-query): support inject(QueryClient)

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: arnoud-dv

docs/framework/angular/guides/invalidations-from-mutations.md

@@ -19,10 +19,13 @@ class TodoItemComponent {
 [//]: # 'Example2'
 
 ```ts
-import { injectMutation } from '@tanstack/angular-query-experimental'
+import {
+  injectMutation,
+  QueryClient,
+} from '@tanstack/angular-query-experimental'
 
 export class TodosComponent {
-  queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
 
   // When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
   mutation = injectMutation((client) => ({

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

@@ -70,7 +70,7 @@ const result = injectQuery(() => ({
 })
 export class PaginationExampleComponent {
   page = signal(0)
-  #queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
 
   query = injectQuery(() => ({
     queryKey: ['projects', this.page()],

docs/framework/angular/guides/placeholder-query-data.md

@@ -42,7 +42,7 @@ export class BlogPostComponent {
     this.postId.set(value)
   }
   postId = signal(0)
-  queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
 
   result = injectQuery(() => ({
     queryKey: ['blogPost', this.postId()],

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

@@ -95,7 +95,7 @@ export class TodosComponent {
     },
   }))
 
-  queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
 
   onCancel() {
     this.queryClient.cancelQueries(['todos'])

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

@@ -8,13 +8,10 @@ replace: { 'useQuery': 'injectQuery', 'hooks': 'functions' }
 [//]: # 'Example2'
 
 ```ts
-import {
-  injectQuery,
-  injectQueryClient,
-} from '@tanstack/angular-query-experimental'
+import { injectQuery, QueryClient } from '@tanstack/angular-query-experimental'
 
 class QueryInvalidationExample {
-  queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
 
   invalidateQueries() {
     this.queryClient.invalidateQueries({ queryKey: ['todos'] })

docs/framework/angular/quick-start.md

@@ -51,7 +51,6 @@ import { lastValueFrom } from 'rxjs'
 import {
   injectMutation,
   injectQuery,
-  injectQueryClient,
 } from '@tanstack/angular-query-experimental'
 
 @Component({
@@ -70,7 +69,7 @@ import {
 })
 export class TodosComponent {
   todoService = inject(TodoService)
-  queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
 
   query = injectQuery(() => ({
     queryKey: ['todos'],

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

@@ -6,10 +6,7 @@ import {
   inject,
   input,
 } from '@angular/core'
-import {
-  injectQuery,
-  injectQueryClient,
-} from '@tanstack/angular-query-experimental'
+import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
 import { fromEvent, lastValueFrom, takeUntil } from 'rxjs'
 import { PostsService } from '../services/posts-service'
 
@@ -38,5 +35,5 @@ export class PostComponent {
     },
   }))
 
-  queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
 }

examples/angular/basic/src/app/components/posts.component.ts

@@ -5,10 +5,7 @@ import {
   Output,
   inject,
 } from '@angular/core'
-import {
-  injectQuery,
-  injectQueryClient,
-} from '@tanstack/angular-query-experimental'
+import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
 import { lastValueFrom } from 'rxjs'
 import { PostsService } from '../services/posts-service'
 
@@ -19,6 +16,7 @@ import { PostsService } from '../services/posts-service'
   templateUrl: './posts.component.html',
 })
 export class PostsComponent {
+  queryClient = inject(QueryClient)
   #postsService = inject(PostsService)
 
   @Output() setPostId = new EventEmitter<number>()
@@ -27,6 +25,4 @@ export class PostsComponent {
     queryKey: ['posts'],
     queryFn: () => lastValueFrom(this.#postsService.allPosts$()),
   }))
-
-  queryClient = injectQueryClient()
 }

examples/angular/pagination/src/app/components/example.component.ts

@@ -7,8 +7,8 @@ import {
   untracked,
 } from '@angular/core'
 import {
+  QueryClient,
   injectQuery,
-  injectQueryClient,
   keepPreviousData,
 } from '@tanstack/angular-query-experimental'
 import { lastValueFrom } from 'rxjs'
@@ -21,7 +21,7 @@ import { ProjectsService } from '../services/projects.service'
   templateUrl: './example.component.html',
 })
 export class ExampleComponent {
-  queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
   projectsService = inject(ProjectsService)
   page = signal(0)
 

examples/angular/query-options-from-a-service/src/app/components/posts.component.ts

@@ -1,9 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import {
-  injectQuery,
-  injectQueryClient,
-} from '@tanstack/angular-query-experimental'
+import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
 import { QueriesService } from '../services/queries-service'
 
 @Component({
@@ -17,5 +14,5 @@ export default class PostsComponent {
   private queries = inject(QueriesService)
 
   postsQuery = injectQuery(() => this.queries.posts())
-  queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
 }

examples/angular/router/src/app/components/posts.component.ts

@@ -1,9 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import {
-  injectQuery,
-  injectQueryClient,
-} from '@tanstack/angular-query-experimental'
+import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
 import { lastValueFrom } from 'rxjs'
 import { PostsService } from '../services/posts-service'
 
@@ -22,5 +19,5 @@ export default class PostsComponent {
     queryFn: () => lastValueFrom(this.#postsService.allPosts$()),
   }))
 
-  queryClient = injectQueryClient()
+  queryClient = inject(QueryClient)
 }

packages/angular-query-devtools-experimental/src/inject-devtools-panel.ts

@@ -11,11 +11,10 @@ import {
 } from '@angular/core'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
 import {
-  injectQueryClient,
+  QueryClient,
   onlineManager,
 } from '@tanstack/angular-query-experimental'
 import { isPlatformBrowser } from '@angular/common'
-import type { QueryClient } from '@tanstack/angular-query-experimental'
 import type { ElementRef } from '@angular/core'
 import type { DevtoolsErrorType } from '@tanstack/query-devtools'
 
@@ -57,10 +56,7 @@ export function injectDevtoolsPanel(
     const destroyRef = inject(DestroyRef)
 
     effect(() => {
-      const injectedClient = injectQueryClient({
-        optional: true,
-        injector: currentInjector,
-      })
+      const injectedClient = currentInjector.get(QueryClient, null)
       const {
         client = injectedClient,
         errorTypes = [],

packages/angular-query-experimental/src/create-base-query.ts

@@ -9,13 +9,11 @@ import {
   signal,
   untracked,
 } from '@angular/core'
-import { notifyManager } from '@tanstack/query-core'
+import { QueryClient, notifyManager } from '@tanstack/query-core'
 import { signalProxy } from './signal-proxy'
 import { shouldThrowError } from './util'
 import { lazyInit } from './util/lazy-init/lazy-init'
-import { injectQueryClient } from './inject-query-client'
 import type {
-  QueryClient,
   QueryKey,
   QueryObserver,
   QueryObserverResult,
@@ -47,7 +45,7 @@ export function createBaseQuery<
   return lazyInit(() => {
     const ngZone = injector.get(NgZone)
     const destroyRef = injector.get(DestroyRef)
-    const queryClient = injectQueryClient({ injector })
+    const queryClient = injector.get(QueryClient)
 
     /**
      * Signal that has the default options from query client applied

packages/angular-query-experimental/src/inject-is-fetching.ts

@@ -1,7 +1,6 @@
 import { DestroyRef, NgZone, inject, signal } from '@angular/core'
-import { notifyManager } from '@tanstack/query-core'
+import { QueryClient, notifyManager } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
-import { injectQueryClient } from './inject-query-client'
 import type { QueryFilters } from '@tanstack/query-core'
 import type { Injector, Signal } from '@angular/core'
 
@@ -20,9 +19,9 @@ export function injectIsFetching(
   injector?: Injector,
 ): Signal<number> {
   return assertInjector(injectIsFetching, injector, () => {
-    const queryClient = injectQueryClient()
     const destroyRef = inject(DestroyRef)
     const ngZone = inject(NgZone)
+    const queryClient = inject(QueryClient)
 
     const cache = queryClient.getQueryCache()
     // isFetching is the prev value initialized on mount *

packages/angular-query-experimental/src/inject-is-mutating.ts

@@ -1,7 +1,6 @@
 import { DestroyRef, NgZone, inject, signal } from '@angular/core'
-import { notifyManager } from '@tanstack/query-core'
+import { QueryClient, notifyManager } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
-import { injectQueryClient } from './inject-query-client'
 import type { MutationFilters } from '@tanstack/query-core'
 import type { Injector, Signal } from '@angular/core'
 
@@ -19,9 +18,9 @@ export function injectIsMutating(
   injector?: Injector,
 ): Signal<number> {
   return assertInjector(injectIsMutating, injector, () => {
-    const queryClient = injectQueryClient()
     const destroyRef = inject(DestroyRef)
     const ngZone = inject(NgZone)
+    const queryClient = inject(QueryClient)
 
     const cache = queryClient.getMutationCache()
     // isMutating is the prev value initialized on mount *

packages/angular-query-experimental/src/inject-mutation-state.ts

@@ -6,9 +6,12 @@ import {
   signal,
   untracked,
 } from '@angular/core'
-import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'
+import {
+  QueryClient,
+  notifyManager,
+  replaceEqualDeep,
+} from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
-import { injectQueryClient } from './inject-query-client'
 import { lazySignalInitializer } from './util/lazy-signal-initializer/lazy-signal-initializer'
 import type { Injector, Signal } from '@angular/core'
 import type {
@@ -55,8 +58,8 @@ export function injectMutationState<TResult = MutationState>(
 ): Signal<Array<TResult>> {
   return assertInjector(injectMutationState, options?.injector, () => {
     const destroyRef = inject(DestroyRef)
-    const queryClient = injectQueryClient()
     const ngZone = inject(NgZone)
+    const queryClient = inject(QueryClient)
 
     const mutationCache = queryClient.getMutationCache()
 

packages/angular-query-experimental/src/inject-mutation.ts

@@ -8,18 +8,17 @@ import {
   runInInjectionContext,
   signal,
 } from '@angular/core'
-import { MutationObserver, notifyManager } from '@tanstack/query-core'
+import {
+  MutationObserver,
+  QueryClient,
+  notifyManager,
+} from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import { signalProxy } from './signal-proxy'
-import { injectQueryClient } from './inject-query-client'
 import { noop, shouldThrowError } from './util'
 
 import { lazyInit } from './util/lazy-init/lazy-init'
-import type {
-  DefaultError,
-  MutationObserverResult,
-  QueryClient,
-} from '@tanstack/query-core'
+import type { DefaultError, MutationObserverResult } from '@tanstack/query-core'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
@@ -47,10 +46,10 @@ export function injectMutation<
   injector?: Injector,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
   return assertInjector(injectMutation, injector, () => {
-    const queryClient = injectQueryClient()
     const currentInjector = inject(Injector)
     const destroyRef = inject(DestroyRef)
     const ngZone = inject(NgZone)
+    const queryClient = inject(QueryClient)
 
     return lazyInit(() =>
       runInInjectionContext(currentInjector, () => {

packages/angular-query-experimental/src/inject-queries.ts

@@ -1,7 +1,10 @@
-import { QueriesObserver, notifyManager } from '@tanstack/query-core'
+import {
+  QueriesObserver,
+  QueryClient,
+  notifyManager,
+} from '@tanstack/query-core'
 import { DestroyRef, computed, effect, inject, signal } from '@angular/core'
 import { assertInjector } from './util/assert-injector/assert-injector'
-import { injectQueryClient } from './inject-query-client'
 import type { Injector, Signal } from '@angular/core'
 import type {
   DefaultError,
@@ -199,7 +202,7 @@ export function injectQueries<
   injector?: Injector,
 ): Signal<TCombinedResult> {
   return assertInjector(injectQueries, injector, () => {
-    const queryClient = injectQueryClient()
+    const queryClient = inject(QueryClient)
     const destroyRef = inject(DestroyRef)
 
     const defaultedQueries = computed(() => {

packages/angular-query-experimental/src/inject-query-client.ts

@@ -1,27 +1,22 @@
-import { createNoopInjectionToken } from './util/create-injection-token/create-injection-token'
-import type { QueryClient } from '@tanstack/query-core'
-
-const tokens = createNoopInjectionToken<QueryClient>('QueryClientToken')
+import { Injector, inject } from '@angular/core'
+import { QueryClient } from '@tanstack/query-core'
+import type { InjectOptions } from '@angular/core'
 
 /**
- * Injects the `QueryClient` instance into the component or service.
+ * Injects a `QueryClient` instance and allows passing a custom injector.
+ *
+ * You can also use `inject(QueryClient)` if you don't need to provide a custom injector.
  *
  * **Example**
  * ```ts
  * const queryClient = injectQueryClient();
  * ```
+ * @param injectOptions - Type of the options argument to inject and optionally a custom injector.
  * @returns The `QueryClient` instance.
  * @public
  */
-export const injectQueryClient = tokens[0]
-
-/**
- * Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the
- * {@link https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient}
- * for the entire application. You can use `provideQueryClient` to provide a
- * different `QueryClient` instance for a part of the application.
- * @public
- */
-export const provideQueryClient = tokens[1]
-
-export const QUERY_CLIENT = tokens[2]
+export function injectQueryClient(
+  injectOptions: InjectOptions & { injector?: Injector } = {},
+) {
+  return (injectOptions.injector ?? inject(Injector)).get(QueryClient)
+}