From 347148c1622d9b5845a4a8dbb93e32a0756f1888 Mon Sep 17 00:00:00 2001 From: Arnoud de Vries <6420061+arnoud-dv@users.noreply.github.com> Date: Thu, 14 Nov 2024 22:34:58 +0100 Subject: [PATCH 1/2] fix(angular-query): support inject(QueryClient) --- .../guides/invalidations-from-mutations.md | 4 +- .../angular/guides/paginated-queries.md | 2 +- .../angular/guides/placeholder-query-data.md | 2 +- .../angular/guides/query-cancellation.md | 2 +- .../angular/guides/query-invalidation.md | 4 +- docs/framework/angular/quick-start.md | 3 +- .../src/app/components/post.component.ts | 7 +- .../src/app/components/posts.component.ts | 8 +- .../src/app/components/example.component.ts | 4 +- .../src/app/components/posts.component.ts | 7 +- .../src/app/components/posts.component.ts | 4 +- .../src/inject-devtools-panel.ts | 8 +- .../src/create-base-query.ts | 6 +- .../src/inject-is-fetching.ts | 5 +- .../src/inject-is-mutating.ts | 5 +- .../src/inject-mutation-state.ts | 9 +- .../src/inject-mutation.ts | 15 +- .../src/inject-queries.ts | 9 +- .../src/inject-query-client.ts | 29 ++- .../src/providers.ts | 21 +- .../create-injection-token.test.ts | 32 --- .../create-injection-token.ts | 183 ------------------ 22 files changed, 71 insertions(+), 298 deletions(-) delete mode 100644 packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.test.ts delete mode 100644 packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.ts diff --git a/docs/framework/angular/guides/invalidations-from-mutations.md b/docs/framework/angular/guides/invalidations-from-mutations.md index 3c37172fce..77ee6dc93e 100644 --- a/docs/framework/angular/guides/invalidations-from-mutations.md +++ b/docs/framework/angular/guides/invalidations-from-mutations.md @@ -19,10 +19,10 @@ 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) => ({ diff --git a/docs/framework/angular/guides/paginated-queries.md b/docs/framework/angular/guides/paginated-queries.md index 3fe42c6a9a..4baa3d4cfb 100644 --- a/docs/framework/angular/guides/paginated-queries.md +++ b/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()], diff --git a/docs/framework/angular/guides/placeholder-query-data.md b/docs/framework/angular/guides/placeholder-query-data.md index e51537e357..6f98531431 100644 --- a/docs/framework/angular/guides/placeholder-query-data.md +++ b/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()], diff --git a/docs/framework/angular/guides/query-cancellation.md b/docs/framework/angular/guides/query-cancellation.md index 7699625aad..e0d108da67 100644 --- a/docs/framework/angular/guides/query-cancellation.md +++ b/docs/framework/angular/guides/query-cancellation.md @@ -95,7 +95,7 @@ export class TodosComponent { }, })) - queryClient = injectQueryClient() + queryClient = inject(QueryClient) onCancel() { this.queryClient.cancelQueries(['todos']) diff --git a/docs/framework/angular/guides/query-invalidation.md b/docs/framework/angular/guides/query-invalidation.md index 645e5d5aab..c3d9068d51 100644 --- a/docs/framework/angular/guides/query-invalidation.md +++ b/docs/framework/angular/guides/query-invalidation.md @@ -10,11 +10,11 @@ replace: { 'useQuery': 'injectQuery', 'hooks': 'functions' } ```ts import { injectQuery, - injectQueryClient, + QueryClient, } from '@tanstack/angular-query-experimental' class QueryInvalidationExample { - queryClient = injectQueryClient() + queryClient = inject(QueryClient) invalidateQueries() { this.queryClient.invalidateQueries({ queryKey: ['todos'] }) diff --git a/docs/framework/angular/quick-start.md b/docs/framework/angular/quick-start.md index f4575c1f08..b593a8798f 100644 --- a/docs/framework/angular/quick-start.md +++ b/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'], diff --git a/examples/angular/basic/src/app/components/post.component.ts b/examples/angular/basic/src/app/components/post.component.ts index e4f4f820f2..d77e707e99 100644 --- a/examples/angular/basic/src/app/components/post.component.ts +++ b/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) } diff --git a/examples/angular/basic/src/app/components/posts.component.ts b/examples/angular/basic/src/app/components/posts.component.ts index 7aa1c8df55..e487be46c7 100644 --- a/examples/angular/basic/src/app/components/posts.component.ts +++ b/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() @@ -27,6 +25,4 @@ export class PostsComponent { queryKey: ['posts'], queryFn: () => lastValueFrom(this.#postsService.allPosts$()), })) - - queryClient = injectQueryClient() } diff --git a/examples/angular/pagination/src/app/components/example.component.ts b/examples/angular/pagination/src/app/components/example.component.ts index 9bb4d10b49..31a7ce21e8 100644 --- a/examples/angular/pagination/src/app/components/example.component.ts +++ b/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) diff --git a/examples/angular/query-options-from-a-service/src/app/components/posts.component.ts b/examples/angular/query-options-from-a-service/src/app/components/posts.component.ts index 1fe15616bf..5c19c12b2f 100644 --- a/examples/angular/query-options-from-a-service/src/app/components/posts.component.ts +++ b/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) } diff --git a/examples/angular/router/src/app/components/posts.component.ts b/examples/angular/router/src/app/components/posts.component.ts index a660d6ab22..4e8f718170 100644 --- a/examples/angular/router/src/app/components/posts.component.ts +++ b/examples/angular/router/src/app/components/posts.component.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core' import { RouterLink } from '@angular/router' import { + QueryClient, injectQuery, - injectQueryClient, } from '@tanstack/angular-query-experimental' import { lastValueFrom } from 'rxjs' import { PostsService } from '../services/posts-service' @@ -22,5 +22,5 @@ export default class PostsComponent { queryFn: () => lastValueFrom(this.#postsService.allPosts$()), })) - queryClient = injectQueryClient() + queryClient = inject(QueryClient) } diff --git a/packages/angular-query-devtools-experimental/src/inject-devtools-panel.ts b/packages/angular-query-devtools-experimental/src/inject-devtools-panel.ts index 70e715ca1c..8035670851 100644 --- a/packages/angular-query-devtools-experimental/src/inject-devtools-panel.ts +++ b/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 = [], diff --git a/packages/angular-query-experimental/src/create-base-query.ts b/packages/angular-query-experimental/src/create-base-query.ts index 1af05227aa..c86844a29b 100644 --- a/packages/angular-query-experimental/src/create-base-query.ts +++ b/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 diff --git a/packages/angular-query-experimental/src/inject-is-fetching.ts b/packages/angular-query-experimental/src/inject-is-fetching.ts index 4ca715cee7..8219897c7d 100644 --- a/packages/angular-query-experimental/src/inject-is-fetching.ts +++ b/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 { 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 * diff --git a/packages/angular-query-experimental/src/inject-is-mutating.ts b/packages/angular-query-experimental/src/inject-is-mutating.ts index e71264df56..6b0da128c9 100644 --- a/packages/angular-query-experimental/src/inject-is-mutating.ts +++ b/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 { 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 * diff --git a/packages/angular-query-experimental/src/inject-mutation-state.ts b/packages/angular-query-experimental/src/inject-mutation-state.ts index ad9aa44357..39c8da5176 100644 --- a/packages/angular-query-experimental/src/inject-mutation-state.ts +++ b/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( ): Signal> { return assertInjector(injectMutationState, options?.injector, () => { const destroyRef = inject(DestroyRef) - const queryClient = injectQueryClient() const ngZone = inject(NgZone) + const queryClient = inject(QueryClient) const mutationCache = queryClient.getMutationCache() diff --git a/packages/angular-query-experimental/src/inject-mutation.ts b/packages/angular-query-experimental/src/inject-mutation.ts index 4ec2c304b9..9644983160 100644 --- a/packages/angular-query-experimental/src/inject-mutation.ts +++ b/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 { 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, () => { diff --git a/packages/angular-query-experimental/src/inject-queries.ts b/packages/angular-query-experimental/src/inject-queries.ts index 7d278622e4..423d81c29e 100644 --- a/packages/angular-query-experimental/src/inject-queries.ts +++ b/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 { return assertInjector(injectQueries, injector, () => { - const queryClient = injectQueryClient() + const queryClient = inject(QueryClient) const destroyRef = inject(DestroyRef) const defaultedQueries = computed(() => { diff --git a/packages/angular-query-experimental/src/inject-query-client.ts b/packages/angular-query-experimental/src/inject-query-client.ts index 47b992555f..c2c2d880cc 100644 --- a/packages/angular-query-experimental/src/inject-query-client.ts +++ b/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('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) +} diff --git a/packages/angular-query-experimental/src/providers.ts b/packages/angular-query-experimental/src/providers.ts index 522a060c18..cbb2d7d53e 100644 --- a/packages/angular-query-experimental/src/providers.ts +++ b/packages/angular-query-experimental/src/providers.ts @@ -9,11 +9,9 @@ import { makeEnvironmentProviders, runInInjectionContext, } from '@angular/core' -import { onlineManager } from '@tanstack/query-core' +import { QueryClient, onlineManager } from '@tanstack/query-core' import { isPlatformBrowser } from '@angular/common' -import { injectQueryClient, provideQueryClient } from './inject-query-client' import { isDevMode } from './util/is-dev-mode/is-dev-mode' -import type { QueryClient } from '@tanstack/query-core' import type { EnvironmentProviders, Provider } from '@angular/core' import type { DevtoolsButtonPosition, @@ -22,6 +20,18 @@ import type { TanstackQueryDevtools, } from '@tanstack/query-devtools' +/** + * 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. + * @param queryClient - the `QueryClient` instance to provide. + * @public + */ +export function provideQueryClient(queryClient: QueryClient) { + return { provide: QueryClient, useValue: queryClient } +} + /** * Sets up providers necessary to enable TanStack Query functionality for Angular applications. * @@ -260,10 +270,7 @@ export function withDevtools( const destroyRef = inject(DestroyRef) const getResolvedQueryClient = () => { - const injectedClient = injectQueryClient({ - optional: true, - injector, - }) + const injectedClient = injector.get(QueryClient, null) const client = options().client ?? injectedClient if (!client) { throw new Error('No QueryClient found') diff --git a/packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.test.ts b/packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.test.ts deleted file mode 100644 index 3e51d456b5..0000000000 --- a/packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.test.ts +++ /dev/null @@ -1,32 +0,0 @@ -/* eslint-disable cspell/spellchecker */ -/** - * The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app. - * - * Original Author: Chau Tran - * - * NG Extension Platform is an open-source project licensed under the MIT license. - * - * For more information about the original code, see - * https://github.com/nartc/ngxtension-platform - */ -/* eslint-enable */ - -import { TestBed } from '@angular/core/testing' -import { createNoopInjectionToken } from './create-injection-token' - -describe('createNoopInjectionToken', () => { - describe('given an injection token', () => { - const [injectFn, provideFn] = createNoopInjectionToken( - 'noop', - { multi: true }, - ) - it('then work properly', () => { - TestBed.configureTestingModule({ - providers: [provideFn(1), provideFn(() => 2)], - }).runInInjectionContext(() => { - const values = injectFn() - expect(values).toEqual([1, 2]) - }) - }) - }) -}) diff --git a/packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.ts b/packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.ts deleted file mode 100644 index 0a12460248..0000000000 --- a/packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.ts +++ /dev/null @@ -1,183 +0,0 @@ -/* eslint-disable cspell/spellchecker */ -/** - * The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app. - * - * Original Author: Chau Tran - * - * NG Extension Platform is an open-source project licensed under the MIT license. - * - * For more information about the original code, see - * https://github.com/nartc/ngxtension-platform - */ -/* eslint-enable */ - -import { InjectionToken, inject, runInInjectionContext } from '@angular/core' -import { assertInjector } from '../assert-injector/assert-injector' -import type { - EnvironmentProviders, - FactoryProvider, - Host, - InjectOptions, - Injector, - Optional, - Provider, - Self, - SkipSelf, - Type, -} from '@angular/core' - -type CreateInjectionTokenDep = - | Type - // NOTE: we don't have an AbstractType - | (abstract new (...args: Array) => TTokenType) - | InjectionToken - -type CreateInjectionTokenDeps< - TFactory extends (...args: Array) => any, - TFactoryDeps extends Parameters = Parameters, -> = { - [Index in keyof TFactoryDeps]: - | CreateInjectionTokenDep - | [ - ...modifiers: Array, - token: CreateInjectionTokenDep, - ] -} & { length: TFactoryDeps['length'] } - -type CreateInjectionTokenOptions< - TFactory extends (...args: Array) => any, - TFactoryDeps extends Parameters = Parameters, -> = - // this means TFunction has no parameters - (TFactoryDeps[0] extends undefined - ? { deps?: never } - : { deps: CreateInjectionTokenDeps }) & { - isRoot?: boolean - multi?: boolean - token?: InjectionToken> - extraProviders?: Provider | EnvironmentProviders - } - -type CreateProvideFnOptions< - TFactory extends (...args: Array) => any, - TFactoryDeps extends Parameters = Parameters, -> = Pick< - CreateInjectionTokenOptions, - 'deps' | 'extraProviders' | 'multi' -> - -type InjectFn = { - (): TFactoryReturn - ( - injectOptions: InjectOptions & { optional?: false } & { - injector?: Injector - }, - ): TFactoryReturn - ( - injectOptions: InjectOptions & { injector?: Injector }, - ): TFactoryReturn | null -} - -type ProvideFn< - TNoop extends boolean, - TFactoryReturn, - TReturn = TFactoryReturn extends Array ? Item : TFactoryReturn, -> = (TNoop extends true - ? (value: TReturn | (() => TReturn)) => Provider - : () => Provider) & - (TReturn extends Function - ? (value: TReturn | (() => TReturn), isFunctionValue: boolean) => Provider - : (value: TReturn | (() => TReturn)) => Provider) - -type CreateInjectionTokenReturn< - TFactoryReturn, - TNoop extends boolean = false, -> = [ - InjectFn, - ProvideFn, - InjectionToken, - () => Provider, -] - -function createInjectFn(token: InjectionToken) { - return function ( - this: Function, - { - injector, - ...injectOptions - }: InjectOptions & { injector?: Injector } = {}, - ) { - injector = assertInjector(this, injector) - return runInInjectionContext(injector, () => - inject(token, injectOptions as InjectOptions), - ) - } -} - -function createProvideFn< - TValue, - TFactory extends (...args: Array) => any = ( - ...args: Array - ) => TValue, - TFactoryDeps extends Parameters = Parameters, ->( - token: InjectionToken, - factory: (...args: Array) => TValue, - opts: CreateProvideFnOptions = {}, -) { - const { deps = [], multi = false, extraProviders = [] } = opts - return (value?: TValue | (() => TValue), isFunctionValue = false) => { - let provider: Provider - if (value !== undefined) { - // eslint-disable-next-line no-shadow - const factory = - typeof value === 'function' - ? isFunctionValue - ? () => value - : value - : () => value - - provider = { - provide: token, - useFactory: factory, - multi, - } - } else { - provider = { - provide: token, - useFactory: factory, - deps: deps as FactoryProvider['deps'], - multi, - } - } - - return [extraProviders, provider] - } -} - -export function createNoopInjectionToken< - TValue, - TMulti extends boolean = false, - TOptions = Pick< - CreateInjectionTokenOptions<() => void, []>, - 'extraProviders' - > & - (TMulti extends true ? { multi: true } : Record), ->(description: string, options?: TOptions) { - type TReturn = TMulti extends true ? Array : TValue - - const token = - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - (options as CreateInjectionTokenOptions<() => void, []>)?.token || - new InjectionToken(description) - return [ - createInjectFn(token) as CreateInjectionTokenReturn[0], - createProvideFn( - token, - () => null!, - (options || {}) as CreateProvideFnOptions<() => void, []>, - ) as CreateInjectionTokenReturn[1], - token, - () => {}, - ] as CreateInjectionTokenReturn -} From 62e59e7a32d341fdb6a859a8e7898705259498d5 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 14 Nov 2024 21:41:52 +0000 Subject: [PATCH 2/2] ci: apply automated fixes --- .../framework/angular/guides/invalidations-from-mutations.md | 5 ++++- docs/framework/angular/guides/query-invalidation.md | 5 +---- examples/angular/basic/src/app/components/posts.component.ts | 2 +- .../angular/router/src/app/components/posts.component.ts | 5 +---- 4 files changed, 7 insertions(+), 10 deletions(-) diff --git a/docs/framework/angular/guides/invalidations-from-mutations.md b/docs/framework/angular/guides/invalidations-from-mutations.md index 77ee6dc93e..62d00a4340 100644 --- a/docs/framework/angular/guides/invalidations-from-mutations.md +++ b/docs/framework/angular/guides/invalidations-from-mutations.md @@ -19,7 +19,10 @@ class TodoItemComponent { [//]: # 'Example2' ```ts -import { injectMutation, QueryClient } from '@tanstack/angular-query-experimental' +import { + injectMutation, + QueryClient, +} from '@tanstack/angular-query-experimental' export class TodosComponent { queryClient = inject(QueryClient) diff --git a/docs/framework/angular/guides/query-invalidation.md b/docs/framework/angular/guides/query-invalidation.md index c3d9068d51..9cd8ea5809 100644 --- a/docs/framework/angular/guides/query-invalidation.md +++ b/docs/framework/angular/guides/query-invalidation.md @@ -8,10 +8,7 @@ replace: { 'useQuery': 'injectQuery', 'hooks': 'functions' } [//]: # 'Example2' ```ts -import { - injectQuery, - QueryClient, -} from '@tanstack/angular-query-experimental' +import { injectQuery, QueryClient } from '@tanstack/angular-query-experimental' class QueryInvalidationExample { queryClient = inject(QueryClient) diff --git a/examples/angular/basic/src/app/components/posts.component.ts b/examples/angular/basic/src/app/components/posts.component.ts index e487be46c7..3c8bf7c79d 100644 --- a/examples/angular/basic/src/app/components/posts.component.ts +++ b/examples/angular/basic/src/app/components/posts.component.ts @@ -5,7 +5,7 @@ import { Output, inject, } from '@angular/core' -import { QueryClient , injectQuery } from '@tanstack/angular-query-experimental' +import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental' import { lastValueFrom } from 'rxjs' import { PostsService } from '../services/posts-service' diff --git a/examples/angular/router/src/app/components/posts.component.ts b/examples/angular/router/src/app/components/posts.component.ts index 4e8f718170..f00ecf5f1b 100644 --- a/examples/angular/router/src/app/components/posts.component.ts +++ b/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 { - QueryClient, - injectQuery, -} from '@tanstack/angular-query-experimental' +import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental' import { lastValueFrom } from 'rxjs' import { PostsService } from '../services/posts-service'