useMutationState(...)

The Hook offers a way to access the state of a mutation, including its current status and any associated data or errors. It's particularly useful for managing UI feedback based on the mutation's lifecycle, such as displaying loading indicators, or alerts. See the TanStack useMutationState(...) 🌴 documentation for more details.

const mutations = api.<service>.<operation>.useMutationState(
  filters
)

Arguments

1. options?: { filters, select },
   • Optional filters and select options
   • If not provided, all mutations matching to <service>.<operation> will be returned
     • 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
   • select?: <T>(mutation: Mutation) => T
     • Optional, a function to select the data from the mutation
     • If not provided, the MutationState will be returned
     • If provided, the result of the function will be returned

Returns

mutations: Array<MutationState> | T: Mutation state or the selection by the given filters

Example

src/FetchStatus.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 UploadedDocuments() {
  const createdDocuments = api.entities.postEntitiesIdDocuments.useMutationState({
    filters: {
      status: 'success',
      parameters: {
        path: {
          entity_id: '1',
        },
      },
    },
    select(mutation): Statuses | undefined {
      return {
        // `mutation.state.data` is the result of the mutation
        id: mutation.state.data?.id,
        name: mutation.state.data?.name,
      };
    },
  });

  return (
    <ul>
      {documents.map(document => (
        <li key={document.id}>
          {document.name}
        </li>
      ))}
    </ul>
  );
}

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