89 lines
2.3 KiB
Markdown
89 lines
2.3 KiB
Markdown
---
|
|
id: createQueriesController
|
|
title: createQueriesController
|
|
---
|
|
|
|
```ts
|
|
function createQueriesController<TQueryOptions, TCombinedResult>(
|
|
host,
|
|
options,
|
|
queryClient?): QueriesResultAccessor<TCombinedResult>;
|
|
```
|
|
|
|
Defined in: [packages/lit-query/src/createQueriesController.ts:701](https://github.com/TanStack/query/blob/main/packages/lit-query/src/createQueriesController.ts#L701)
|
|
|
|
Creates a Lit reactive controller that subscribes the host to multiple
|
|
queries.
|
|
|
|
The returned accessor is callable and also exposes `current` and `destroy`.
|
|
When `options` or `options.queries` is a function, it is re-read during host
|
|
updates so the query list can follow reactive host state.
|
|
|
|
If `queryClient` is omitted, the controller resolves the client from the
|
|
nearest connected `QueryClientProvider`.
|
|
|
|
## Type Parameters
|
|
|
|
### TQueryOptions
|
|
|
|
`TQueryOptions` *extends* `any`[]
|
|
|
|
### TCombinedResult
|
|
|
|
`TCombinedResult` = `CreateQueriesResults`\<`TQueryOptions`\>
|
|
|
|
## Parameters
|
|
|
|
### host
|
|
|
|
`ReactiveControllerHost`
|
|
|
|
The Lit reactive controller host that owns the queries
|
|
subscription.
|
|
|
|
### options
|
|
|
|
[`Accessor`](../type-aliases/Accessor.md)\<[`CreateQueriesControllerOptions`](../type-aliases/CreateQueriesControllerOptions.md)\<`TQueryOptions`, `TCombinedResult`\>\>
|
|
|
|
Queries controller options, or a getter that returns options.
|
|
|
|
### queryClient?
|
|
|
|
[`QueryClient`](../classes/QueryClient.md)
|
|
|
|
Optional explicit query client. Provide this for
|
|
controllers that should not resolve a client from Lit context.
|
|
|
|
## Returns
|
|
|
|
[`QueriesResultAccessor`](../type-aliases/QueriesResultAccessor.md)\<`TCombinedResult`\>
|
|
|
|
An accessor for the latest query results, or the value returned by
|
|
`combine`.
|
|
|
|
## Example
|
|
|
|
```ts
|
|
import { LitElement, html } from 'lit'
|
|
import { createQueriesController } from '@tanstack/lit-query'
|
|
|
|
class DashboardView extends LitElement {
|
|
private readonly dashboard = createQueriesController(this, {
|
|
queries: [
|
|
{ queryKey: ['stats'], queryFn: fetchStats },
|
|
{ queryKey: ['projects'], queryFn: fetchProjects },
|
|
],
|
|
combine: ([stats, projects]) => ({
|
|
stats: stats.data,
|
|
projects: projects.data ?? [],
|
|
isPending: stats.isPending || projects.isPending,
|
|
}),
|
|
})
|
|
|
|
render() {
|
|
const dashboard = this.dashboard()
|
|
return html`<p>Projects: ${dashboard.projects.length}</p>`
|
|
}
|
|
}
|
|
```
|