diff --git a/README.md b/README.md index bb9452d..7205b16 100644 --- a/README.md +++ b/README.md @@ -59,8 +59,25 @@ export class TodosService { #queryClient = injectQueryClient(); } ``` +or provide `QueryClient` [instance](https://tanstack.com/query/v5/docs/reference/QueryClient) manually -> The function should run inside an injection context +```ts +import { provideQueryClient } from '@ngneat/query'; +import { QueryClient } from '@tanstack/query-core'; + +provideQueryClient(() => new QueryClient()) +``` + +and then use with + +```ts +import { injectQueryClient } from '@ngneat/query'; + + ... + #queryClient = injectQueryClient(); +``` + +> Functions should run inside an injection context ### Query diff --git a/query/src/lib/query-client.ts b/query/src/lib/query-client.ts index 3793cc5..0ad5fc4 100644 --- a/query/src/lib/query-client.ts +++ b/query/src/lib/query-client.ts @@ -60,10 +60,13 @@ const QueryClientService = new InjectionToken( ); /** @public */ -export function provideQueryClient(queryClient: QueryClient): Provider { +export function provideQueryClient(queryClientOrFactory: _QueryClient | (() => _QueryClient)): Provider { return { provide: QueryClientToken, - useValue: queryClient, + useFactory: + typeof queryClientOrFactory === 'function' + ? queryClientOrFactory + : () => queryClientOrFactory, }; } diff --git a/query/src/tests/query-client.spec.ts b/query/src/tests/query-client.spec.ts index 197ebdd..fe89b44 100644 --- a/query/src/tests/query-client.spec.ts +++ b/query/src/tests/query-client.spec.ts @@ -1,7 +1,7 @@ import { TestBed, fakeAsync, flush, tick } from '@angular/core/testing'; -import { InfiniteData } from '@tanstack/query-core'; +import { InfiniteData, QueryClient as _QueryClient } from '@tanstack/query-core'; import { expectTypeOf } from 'expect-type'; -import { QueryClient, injectQueryClient } from '../lib/query-client'; +import { QueryClient, injectQueryClient, provideQueryClient } from '../lib/query-client'; import { Posts, PostsService, @@ -135,3 +135,39 @@ describe('QueryClient', () => { >(); }); }); + + +describe('Custom QueryClient', () => { + let queryClient: QueryClient; + let customQueryClientInstance: _QueryClient; + + it('should use custom query client', fakeAsync(() => { + customQueryClientInstance = new _QueryClient(); + TestBed.configureTestingModule({ + providers: [provideQueryClient(customQueryClientInstance)], + }); + TestBed.runInInjectionContext(() => { + queryClient = injectQueryClient(); + }); + + expect(queryClient).toBe(customQueryClientInstance); + })); + + it('should use custom query client provided from function', fakeAsync(() => { + TestBed.configureTestingModule({ + providers: [ + provideQueryClient(() => { + customQueryClientInstance = new _QueryClient(); + return customQueryClientInstance; + }), + ], + }); + TestBed.runInInjectionContext(() => { + queryClient = injectQueryClient(); + }); + + expect(queryClient).toBe(customQueryClientInstance); + })); + +}); +