2.3 KiB
id, title
| id | title |
|---|---|
| createQueriesController | createQueriesController |
function createQueriesController<TQueryOptions, TCombinedResult>(
host,
options,
queryClient?): QueriesResultAccessor<TCombinedResult>;
Defined in: packages/lit-query/src/createQueriesController.ts:701
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<CreateQueriesControllerOptions<TQueryOptions, TCombinedResult>>
Queries controller options, or a getter that returns options.
queryClient?
Optional explicit query client. Provide this for controllers that should not resolve a client from Lit context.
Returns
QueriesResultAccessor<TCombinedResult>
An accessor for the latest query results, or the value returned by
combine.
Example
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>`
}
}