useIsMutating(...)

The optional hook that returns the number of mutations that your application is mutating (useful for app-wide loading indicators). See the TanStack useIsMutating(...) 🌴 documentation for more details.

const mutationNumber = api.<service>.<operation>.useIsMutating(
  filters
)

Arguments

1. filters?: UseMutationStateFiltersByParameters | UseMutationStateFiltersByMutationKey,
   • Optional, represents the Mutation Filters 🌴 to be used, strictly-typed ✨
   • filters.parameters: { path, query, header } will be used for filtering mutations by parameters
   • filters.mutationKey: MutationKey will be used for filtering mutations by MutationKey instead of parameters
     • filters.mutationKey and filters.parameters are mutually exclusive
   • filters.predicate?: (mutation: Mutation) => boolean will be used for filtering mutations by custom predicate
   • If not provided, all mutations matching to <service>.<operation> will be returned

Returns

mutationsNumber: The number of mutations that are matching the provided filters and are in the loading state

Example

src/DocumentsUploadStatus.tsx

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

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 DocumentsUploadStatus() {
  const creatingDocument = api.entities.postEntitiesIdDocuments.useIsMutating({
    path: {
      entity_id: '1',
    },
  });

  const creatingDocumentTotal = api.entities.postEntitiesIdDocuments.useIsMutating();

  return (
    <>
      {!!creatingDocumentTotal && <div>Number of creating documents: {creatingDocumentTotal}...</div>}
      {!!creatingDocument && <div>Creating document...</div>}
    </>
  );
}

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