feat(query): implement functional queryClientOptions factory

README.md

@@ -312,6 +312,31 @@ bootstrapApplication(AppComponent, {
 });
 ```
 
+It accept also a function factory if you need an injection context while creating the configuration.
+
+```ts
+import { provideQueryClientOptions } from '@ngneat/query';
+
+const withFunctionalFactory: QueryClientConfigFn = () => {
+  const notificationService = inject(NotificationService);
+
+  return {
+    queryCache: new QueryCache({
+      onError: (error: Error) => notificationService.notifyError(error),
+    }),
+    defaultOptions: {
+      queries: {
+        staleTime: 3000,
+      },
+    },
+  };
+};
+
+bootstrapApplication(AppComponent, {
+  providers: [provideQueryClientOptions(withFunctionalFactory)],
+});
+```
+
 ## Signal Utils
 
 ### intersectResults

query/src/index.ts

@@ -3,20 +3,19 @@ export { injectIsFetching } from './lib/is-fetching';
 export { injectIsMutating } from './lib/is-mutating';
 export { injectMutation } from './lib/mutation';
 export { injectQuery } from './lib/query';
-export {
-  injectQueryClient,
-  provideQueryClient
-} from './lib/query-client';
+export { injectQueryClient, provideQueryClient } from './lib/query-client';
 
 export * from '@tanstack/query-core';
 export * from './lib/operators';
-export { provideQueryClientOptions } from './lib/query-client-options';
+export {
+  QueryClientConfigFn,
+  provideQueryClientOptions,
+} from './lib/query-client-options';
 export { queryOptions } from './lib/query-options';
 export { intersectResults } from './lib/signals';
 export { ObservableQueryResult, SignalQueryResult } from './lib/types';
 export {
   createPendingObserverResult,
   createSuccessObserverResult,
-  toPromise
+  toPromise,
 } from './lib/utils';
-

query/src/lib/query-client-options.ts

@@ -1,4 +1,8 @@
-import { InjectionToken, makeEnvironmentProviders } from '@angular/core';
+import {
+  EnvironmentProviders,
+  InjectionToken,
+  makeEnvironmentProviders,
+} from '@angular/core';
 import { QueryClientConfig } from '@tanstack/query-core';
 
 export const QUERY_CLIENT_OPTIONS = new InjectionToken<QueryClientConfig>(
@@ -11,11 +15,21 @@ export const QUERY_CLIENT_OPTIONS = new InjectionToken<QueryClientConfig>(
   },
 );
 
-export function provideQueryClientOptions(options: QueryClientConfig) {
+export type QueryClientConfigFn = () => QueryClientConfig;
+
+export function provideQueryClientOptions(
+  options: QueryClientConfig,
+): EnvironmentProviders;
+export function provideQueryClientOptions(
+  options: QueryClientConfigFn,
+): EnvironmentProviders;
+export function provideQueryClientOptions(
+  options: QueryClientConfig | QueryClientConfigFn,
+) {
   return makeEnvironmentProviders([
     {
       provide: QUERY_CLIENT_OPTIONS,
-      useValue: options,
-    },
+      [typeof options === 'function' ? 'useFactory' : 'useValue']: options,
+    } as any,
   ]);
 }

src/app/app.config.ts

@@ -1,14 +1,32 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig, inject } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
-import { appRoutes } from './app.routes';
+import {
+  QueryCache,
+  QueryClientConfigFn,
+  provideQueryClientOptions,
+} from '@ngneat/query';
 import { provideQueryDevTools } from '@ngneat/query-devtools';
+import { appRoutes } from './app.routes';
+import { NotificationService } from './services/notification.service';
+
+const withFunctionaFactory: QueryClientConfigFn = () => {
+  // we can use an injector context here and resolve a service
+  const notificationService = inject(NotificationService);
+
+  return {
+    queryCache: new QueryCache({
+      onError: (error: Error) => notificationService.notifyError(error),
+    }),
+  };
+};
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(appRoutes, withComponentInputBinding()),
     provideHttpClient(),
+    provideQueryClientOptions(withFunctionaFactory),
     provideQueryDevTools(),
   ],
 };

src/app/services/notification.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+// just for simulating a simple service that could be
+// injected during configuration
+@Injectable({ providedIn: 'root' })
+export class NotificationService {
+  notifyError(error: Error) {
+    console.log(error);
+  }
+}