feat(query): add provideQueryConfig to provide custom queries objects (#213)

Author: Dji75

README.md

@@ -109,6 +109,7 @@ export class TodosService {
 For methods that require a `queryFn` parameter like
 `ensureQueryData`, `fetchQuery`, `prefetchQuery`, `fetchInfiniteQuery` and `prefetchInfiniteQuery` it's possible to use both Promises and Observables. See an example [here](https://github.com/ngneat/query/blob/main/src/app/prefetch-page/resolve.ts#L9).
 
+
 #### Component Usage - Observable
 
 To get an observable use the `result$` property:
@@ -626,6 +627,50 @@ class TodoComponent {
 }
 ```
 
+## Custom Queries objects
+
+All injected queries objects got from the following inject functions could be overwritten by using `provideQueryConfig` function:
+- `injectQuery()`
+- `injectMutation()`
+- `injectIsMutating()`
+- `injectIsFetching()`
+- `injectInfiniteQuery()`
+
+All `provideQueryConfig` parameter's properties are optional, and you can use raw object or object factory.
+
+```ts
+export function provideQueryConfig(
+  config: {
+    query?: QueryObject | (() => QueryObject);
+    mutation?: MutationObject | (() => MutationObject);
+    isMutating?: IsMutatingObject | (() => IsMutatingObject);
+    isFetching?: IsFetchingObject | (() => IsFetchingObject);
+    infiniteQuery?: InfiniteQueryObject | (() => InfiniteQueryObject);
+  },
+): Provider
+```
+
+### Mock Example
+```ts
+import { provideQueryConfig } from '@ngneat/query';
+
+const queryMock = {
+  use: () => ({
+    result$: of({ ... }),
+    result: computed(() => ({ ... })),
+  })
+};
+
+provideQueryConfig({
+  query: queryMock, // or query: () => queryMock if you need a factory
+});
+
+const query = injectQuery();
+query({ ... }).result() // you can call query from your custom query mock
+```
+
+
+
 ## Devtools
 
 Install the `@ngneat/query-devtools` package. Lazy load and use it only in `development` environment:

query/src/index.ts

@@ -20,3 +20,4 @@ export {
   createSuccessObserverResult,
   toPromise,
 } from './lib/utils';
+export { provideQueryConfig } from './lib/provide-query-config';

query/src/lib/infinite-query.ts

@@ -1,12 +1,11 @@
 import {
   assertInInjectionContext,
   inject,
-  Injectable,
+  InjectionToken,
   Injector,
   runInInjectionContext,
 } from '@angular/core';
 import { injectQueryClient } from './query-client';
-
 import {
   DefaultError,
   InfiniteData,
@@ -24,6 +23,17 @@ import {
 } from './base-query';
 import { Result } from './types';
 
+/** @internal */
+export const InfiniteQueryToken = new InjectionToken<InfiniteQuery>(
+  'InfiniteQuery',
+  {
+    providedIn: 'root',
+    factory() {
+      return new InfiniteQuery();
+    },
+  },
+);
+
 interface _CreateInfiniteQueryOptions<
   TQueryFnData = unknown,
   TError = DefaultError,
@@ -61,8 +71,28 @@ export type CreateInfiniteQueryOptions<
   queryFn: QueryFunctionWithObservable<TQueryFnData, TQueryKey, TPageParam>;
 };
 
-@Injectable({ providedIn: 'root' })
-class InfiniteQuery {
+export interface InfiniteQueryObject {
+  use: <
+    TQueryFnData,
+    TError = DefaultError,
+    TData = InfiniteData<TQueryFnData>,
+    TQueryKey extends QueryKey = QueryKey,
+    TPageParam = unknown,
+  >(
+    options: CreateInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryKey,
+      TPageParam
+    >,
+  ) => Result<InfiniteQueryObserverResult<TData, TError>>;
+}
+
+/** @internal
+ * only exported for @test
+ */
+class InfiniteQuery implements InfiniteQueryObject {
   #instance = injectQueryClient();
   #injector = inject(Injector);
 
@@ -90,18 +120,33 @@ class InfiniteQuery {
   }
 }
 
+function infiniteQueryUseFnFromToken() {
+  const infiniteQuery = inject(InfiniteQueryToken);
+  return infiniteQuery.use.bind(infiniteQuery);
+}
+
+/**
+ *
+ * Optionally pass an injector that will be used than the current one.
+ * Can be useful if you want to use it in ngOnInit hook for example.
+ *
+ * @example
+ *
+ * injector = inject(Injector);
+ *
+ * ngOnInit() {
+ *  const infiniteQuery = injectInfiniteQuery({ injector: this.injector });
+ * }
+ *
+ */
 export function injectInfiniteQuery(options?: { injector?: Injector }) {
   if (options?.injector) {
-    return runInInjectionContext(options.injector, () => {
-      const query = inject(InfiniteQuery);
-
-      return query.use.bind(query);
-    });
+    return runInInjectionContext(options.injector, () =>
+      infiniteQueryUseFnFromToken(),
+    );
   }
 
   assertInInjectionContext(injectInfiniteQuery);
 
-  const query = inject(InfiniteQuery);
-
-  return query.use.bind(query);
+  return infiniteQueryUseFnFromToken();
 }

query/src/lib/is-fetching.ts

@@ -3,14 +3,33 @@ import { injectQueryClient } from './query-client';
 import {
   assertInInjectionContext,
   inject,
-  Injectable,
   InjectionToken,
+  Injector,
+  runInInjectionContext,
+  Signal,
 } from '@angular/core';
 import { distinctUntilChanged, Observable } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
 
-@Injectable({ providedIn: 'root' })
-export class IsFetching {
+/** @internal */
+export const IsFetchingToken = new InjectionToken<IsFetching>('IsFetching', {
+  providedIn: 'root',
+  factory() {
+    return new IsFetching();
+  },
+});
+
+export interface IsFetchingObject {
+  use: (filters?: QueryFilters) => {
+    result$: Observable<number>;
+    toSignal: () => Signal<number | undefined>;
+  };
+}
+
+/** @internal
+ * only exported for @test
+ */
+export class IsFetching implements IsFetchingObject {
   #queryClient = injectQueryClient();
 
   use(filters?: QueryFilters) {
@@ -32,15 +51,33 @@ export class IsFetching {
   }
 }
 
-const UseIsFetching = new InjectionToken<IsFetching['use']>('UseIsFetching', {
-  providedIn: 'root',
-  factory() {
-    const isFetching = new IsFetching();
-    return isFetching.use.bind(isFetching);
-  },
-});
+function isFetchingUseFnFromToken() {
+  const isFetching = inject(IsFetchingToken);
+  return isFetching.use.bind(isFetching);
+}
+
+/**
+ *
+ * Optionally pass an injector that will be used than the current one.
+ * Can be useful if you want to use it in ngOnInit hook for example.
+ *
+ * @example
+ *
+ * injector = inject(Injector);
+ *
+ * ngOnInit() {
+ *  const isFetching = injectIsFetching({ injector: this.injector });
+ * }
+ *
+ */
+export function injectIsFetching(options?: { injector?: Injector }) {
+  if (options?.injector) {
+    return runInInjectionContext(options.injector, () =>
+      isFetchingUseFnFromToken(),
+    );
+  }
 
-export function injectIsFetching() {
   assertInInjectionContext(injectIsFetching);
-  return inject(UseIsFetching);
+
+  return isFetchingUseFnFromToken();
 }

query/src/lib/is-mutating.ts

@@ -3,14 +3,33 @@ import { injectQueryClient } from './query-client';
 import {
   assertInInjectionContext,
   inject,
-  Injectable,
   InjectionToken,
+  Injector,
+  runInInjectionContext,
+  Signal,
 } from '@angular/core';
 import { distinctUntilChanged, Observable } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
 
-@Injectable({ providedIn: 'root' })
-export class IsMutating {
+/** @internal */
+export const IsMutatingToken = new InjectionToken<IsMutating>('IsMutating', {
+  providedIn: 'root',
+  factory() {
+    return new IsMutating();
+  },
+});
+
+export interface IsMutatingObject {
+  use: (filters?: MutationFilters) => {
+    result$: Observable<number>;
+    toSignal: () => Signal<number | undefined>;
+  };
+}
+
+/** @internal
+ * only exported for @test
+ */
+export class IsMutating implements IsMutatingObject {
   #queryClient = injectQueryClient();
 
   use(filters?: MutationFilters) {
@@ -34,16 +53,33 @@ export class IsMutating {
   }
 }
 
-const UseIsMutating = new InjectionToken<IsMutating['use']>('UseIsFetching', {
-  providedIn: 'root',
-  factory() {
-    const isMutating = new IsMutating();
-    return isMutating.use.bind(isMutating);
-  },
-});
+function isMutatingUseFnFromToken() {
+  const isMutating = inject(IsMutatingToken);
+  return isMutating.use.bind(isMutating);
+}
+
+/**
+ *
+ * Optionally pass an injector that will be used than the current one.
+ * Can be useful if you want to use it in ngOnInit hook for example.
+ *
+ * @example
+ *
+ * injector = inject(Injector);
+ *
+ * ngOnInit() {
+ *  const isMutating = injectIsMutating({ injector: this.injector });
+ * }
+ *
+ */
+export function injectIsMutating(options?: { injector?: Injector }) {
+  if (options?.injector) {
+    return runInInjectionContext(options.injector, () =>
+      isMutatingUseFnFromToken(),
+    );
+  }
 
-export function injectIsMutating() {
   assertInInjectionContext(injectIsMutating);
 
-  return inject(UseIsMutating);
+  return isMutatingUseFnFromToken();
 }