useIsFetching.md

id	useIsFetching
title	useIsFetching

function useIsFetching(
   host: ReactiveControllerHost,
   filters?: Accessor<QueryFilters<readonly unknown[]>>,
   queryClient?: QueryClient
): IsFetchingAccessor;

Defined in: packages/lit-query/src/useIsFetching.ts:142

Creates a Lit reactive controller that tracks how many matching queries are currently fetching by default.

When filters is a function, it is re-read during host updates so the count can follow reactive host state. If queryClient is omitted, the controller resolves the client from the nearest connected QueryClientProvider.

Parameters

host

ReactiveControllerHost

The Lit reactive controller host that owns the cache subscription.

filters?

Accessor<QueryFilters<readonly unknown[]>> = {}

Query filters, or a getter that returns query filters. fetchStatus defaults to 'fetching' when omitted or undefined; set it to 'paused' or 'idle' to count queries in that status instead.

filters properties

Built from QueryFilters. See the type above for what it changes.

queryClient?

QueryClient

Optional explicit query client. Provide this for controllers that should not resolve a client from Lit context.

Returns

IsFetchingAccessor

An accessor for the number of matching queries with the requested fetchStatus.

Example

import { LitElement, html } from 'lit'
import { useIsFetching } from '@tanstack/lit-query'

class TodosStatus extends LitElement {
  private readonly todosFetching = useIsFetching(this, {
    queryKey: ['todos'],
  })

  render() {
    return html`<span>${this.todosFetching()} active todo fetches</span>`
  }
}