Angular Query - How to Handle Multiple Query Client Instances

[OmerGronich]

Hello everyone,

First, I want to express my gratitude to @arnoud-dv for the tremendous effort put into developing this Angular adapter for TanStack Query. 🙏

I'm currently exploring how to effectively work with multiple QueryClient instances in Angular. My use case involves having one client for regular in-memory queries and additional clients for different browser storage layers, such as IndexedDB, LocalStorage, and SessionStorage.

In React, it's straightforward to build an abstraction on top of useQuery since it accepts a QueryClient as a parameter. For example:

const inMemoryQueryClient = new QueryClient();
const indexedDBQueryClient = new QueryClient();

const useInMemoryQuery = (opts) => {
  return useQuery(opts, inMemoryQueryClient);
}
const useIndexedDBQuery = (opts) => {
  return useQuery(opts, indexedDBQueryClient);
}

Source: TanStack Query GitHub Discussion #6321

In Angular, however, injectQuery and injectQueryClient rely on dependency injection. While I’ve managed to "make it work" by using provideQueryClient to supply the appropriate client for each component, ensuring that injectQuery finds the correct client in the injector tree, this approach doesn’t feel very ergonomic.

I’m seeking advice or best practices on how to achieve a similar level of abstraction and flexibility in Angular as the React example above. Is there a recommended way to handle this scenario with the current Angular adapter?

Thank you for your help!

[tomer953]

+1
Its not even related to bad or best practice, we can't use two different clients on the same component as for the current design, and thats might be the real issue here

Thank you all guys!

[riccardoperra]

This is just an idea, couldn't you just pass an injector instance with your own query client?

https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-query-client.ts

const customInjector = Injector.create({
  providers: [
   provideQueryClient(customQueryClient)
  ]
})
const query = injectQuery(() => { ... }, customInjector);

You'll probably have to mount/unmount the queryclient by yourself like the code provideAngularQuery implementation
https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/providers.ts#L50-L64

[arnoud-dv]

@riccardoperra 's code should work. If you want to make it more ergonomic to use in multiple places in your code base you can do that in a custom injectQuery like function:

const customInjector = Injector.create({
  providers: [provideQueryClient(customQueryClient)],
  parent: inject(Injector),
})

function injectIndexedDBQuery(
  optionsFn: (client: QueryClient) => CreateQueryOptions,
) {
  return injectQuery(optionsFn, customInjector)
}

To achieve good typing you'd have to have function overloads with type parameters, which you can copy from the injectQuery implementation

[OmerGronich]

Thank you, @riccardoperra and @arnoud-dv for your answers—they helped me achieve exactly what I wanted.

However, after doing some more reading, I came across this discussion: #3568, where @TkDodo demonstrates how shouldDehydrateQuery works. I used this approach to selectively persist queries to different persisters using a single query client instance, which turned out to be much cleaner than my original plan.

Closing the discussion—thanks again!