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 = qraft.<service>.<operation>.useMutationState(
  filters,
  queryClient,
)

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
2. queryClient?: QueryClient
   • Optional QueryClient 🌴 to be used
   • If not provided
     • QraftContext.queryClient will be used if available
     • useQueryClient() 🌴 result will be used as a fallback

Returns

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

Example

src/FetchStatus.tsx

function UploadedDocuments() {
  const createdDocuments = qraft.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>
  );
}