React: useLatestMutationState - An ergonomic wrapper for react-query's useMutationState

readme.md

what

An ergonomic wrapper for react-query's useMutationState

usage

export function useCreatePostMutation(...) {
  return useMutation({ mutationKey: ['create-post'], ... })
}

export function useCreatePostMutationState(...) {
  return useLatestMutationState({ mutationKey: ['create-post'] })
}

use-latest-mutation-state.ts

import { useMutationState } from "@tanstack/react-query";

export function useLatestMutationState(mutationKey: unknown[]) {
  const mutation = useMutationState({
    filters: { mutationKey },
    select: (entry) => entry.state,
  });

  const latest = mutation.at(-1);

  return {
    isPending: latest?.status === "pending",
    isError: latest?.status === "error",
    isSuccess: latest?.status === "success",
  };
}