useIsFetching(...)

The Hook enables you to monitor the number of queries, matching the provided filters. This can be useful for creating loading indicators or performing other actions based on whether any requests are currently in progress. See the TanStack useIsFetching(...) 🌴 documentation for more details.

const queriesNumber = api.<service>.<operation>.useIsFetching(
  filters
)

Arguments

1. filters?: QueryFiltersByParameters | QueryFiltersByQueryKey
   • Optional, represents the Query Filters 🌴 to be used. If not provided, all normal and Infinite queries will be used to filter.
   • filters.parameters: { path, query, header } will be used for filtering queries by parameters
   • filters.infinite: boolean will be used to filter infinite or normal queries
   • filters.queryKey: QueryKey will be used for filtering queries by QueryKey instead of parameters
     • filters.queryKey and filters.parameters are mutually exclusive
   • filters.predicate?: (query: Query) => boolean will be used for filtering queries by custom predicate

Returns

number: The number of queries that are matching the provided filters.

Example

src/FetchStatus.tsx

import { createAPIClient } from './api'; // generated by OpenAPI Qraft CLI

import { requestFn } from '@openapi-qraft/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

const api = createAPIClient({
  requestFn,
  queryClient,
  baseUrl: 'https://api.sandbox.monite.com/v1',
});

function FetchStatus() {
  // Checks all queries `GET /entities`
  const fetchingTotal = api.entities.getEntities.useIsFetching();

  // Checks all queries `GET /entities/3e3e-3e3e-3e3e` and `x-monite-version: 2023-09-01` header
  const specificQueryKeyTotal = api.entities.getEntities.useIsFetching({
    infinite: false,
    parameters: {
      header: {
        'x-monite-version': '2023-09-01',
      },
      path: {
        entity_id: '3e3e-3e3e-3e3e',
      },
    },
  });

  return (
    <>
      {!!fetchingTotal && <div>Number of queries: {fetchingTotal}...</div>}
      {!!specificQueryKeyTotal && <div>Loading specific query...</div>}
    </>
  );
}

export default function() {
  return (
    <QueryClientProvider client={queryClient}>
      <FetchStatus />
    </QueryClientProvider>
  );
}