@preact-signals/query/src/useIsFetching$.ts

A reactive utility for React/Preact that simplifies the handling of data fetching and state management. Powered by Preact Signals, it provides hooks and functions to create reactive resources and manage their state seamlessly.

import { Reactive, unwrapReactive } from "@preact-signals/utils";
import { QueryClient, QueryFilters } from "@tanstack/query-core";
import { ContextOptions } from "./react-query/index.ts";
import { useQueryClient$ } from "./react-query/QueryClientProvider.tsx";
import { useObserverSignal } from "./useObserver.ts";
import { EMPTY_OBJECT } from "./utils.ts";
import type { ReadonlySignal } from "@preact-signals/unified-signals";

const isFetching = (queryClient: QueryClient, filters: QueryFilters) =>
  queryClient.isFetching(filters);

/**
 *
 * @param _filters pass null to get all queries
 * @param options
 * @returns
 *
 */
export const useIsFetching$ = <T extends Reactive<QueryFilters | null>>(
  _filters: T,
  options?: ContextOptions
): ReadonlySignal<number> => {
  const $queryClient = useQueryClient$(options);
  const $queryCache = () => $queryClient.value.getQueryCache();
  const filters = () => unwrapReactive(_filters) ?? EMPTY_OBJECT;

  const $isFetching = useObserverSignal(() => ({
    getCurrent: () => isFetching($queryClient.value, filters()),
    subscribe: (emit) =>
      $queryCache().subscribe(() => {
        emit(isFetching($queryClient.value, filters()));
      }),
  }));

  return $isFetching;
};