A hook that helps you mutate a resource.

The hook uses useMutation from @tanstack/react-query under the hood, so it accepts all the same options.

import { useDataMutate } from 'react-query-manager';

type TData = { id: 1, name: 'Test' };
type TFormData = { name: string; email: string };
const PATH = 'users/{id}/messages';

const { mutate } = useDataMutate<typeof PATH, TData, TFormData>({
resourcePath: PATH,
});

mutate({
data: {
name: 'John Doe',
email: 'john@example.com',
},
resourceParams: {
id: 10,
},
apiClientParams: { method: 'POST' },
});
  • Type Parameters

    • TPath extends string

      The API path as a string.

    • TData = any

      The expected shape of the data returned by the API.

    • TFormData = any

      The shape of the data that will be sent to the API during the mutation.

    • TExtraData = any

    Parameters

    Returns {
        mutate: ((__namedParameters: MutateVariables<TPath, TFormData, TExtraData>) => Promise<void>);
        mutation:
            | {
                context: unknown;
                data: undefined;
                error: null;
                failureCount: number;
                failureReason: null | CustomError;
                isError: false;
                isIdle: true;
                isPaused: boolean;
                isPending: false;
                isSuccess: false;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData>, CustomError, Variables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "idle";
                submittedAt: number;
                variables: undefined;
            }
            | {
                context: unknown;
                data: undefined;
                error: null;
                failureCount: number;
                failureReason: null | CustomError;
                isError: false;
                isIdle: false;
                isPaused: boolean;
                isPending: true;
                isSuccess: false;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData>, CustomError, Variables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "pending";
                submittedAt: number;
                variables: Variables<TPath, TFormData, TExtraData>;
            }
            | {
                context: unknown;
                data: undefined;
                error: CustomError;
                failureCount: number;
                failureReason: null | CustomError;
                isError: true;
                isIdle: false;
                isPaused: boolean;
                isPending: false;
                isSuccess: false;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData>, CustomError, Variables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "error";
                submittedAt: number;
                variables: Variables<TPath, TFormData, TExtraData>;
            }
            | {
                context: unknown;
                data: QueryResponse<TData>;
                error: null;
                failureCount: number;
                failureReason: null | CustomError;
                isError: false;
                isIdle: false;
                isPaused: boolean;
                isPending: false;
                isSuccess: true;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData>, CustomError, Variables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "success";
                submittedAt: number;
                variables: Variables<TPath, TFormData, TExtraData>;
            };
    }

    An object with mutate and mutation.

    mutate is a function to perform the update operation. Accepts the data and params of the resource.

    mutation is result useMutation without propery mutate

    • mutate: ((__namedParameters: MutateVariables<TPath, TFormData, TExtraData>) => Promise<void>)
    • mutation:
          | {
              context: unknown;
              data: undefined;
              error: null;
              failureCount: number;
              failureReason: null | CustomError;
              isError: false;
              isIdle: true;
              isPaused: boolean;
              isPending: false;
              isSuccess: false;
              mutateAsync: UseMutateAsyncFunction<QueryResponse<TData>, CustomError, Variables<TPath, TFormData, TExtraData>, unknown>;
              reset: (() => void);
              status: "idle";
              submittedAt: number;
              variables: undefined;
          }
          | {
              context: unknown;
              data: undefined;
              error: null;
              failureCount: number;
              failureReason: null | CustomError;
              isError: false;
              isIdle: false;
              isPaused: boolean;
              isPending: true;
              isSuccess: false;
              mutateAsync: UseMutateAsyncFunction<QueryResponse<TData>, CustomError, Variables<TPath, TFormData, TExtraData>, unknown>;
              reset: (() => void);
              status: "pending";
              submittedAt: number;
              variables: Variables<TPath, TFormData, TExtraData>;
          }
          | {
              context: unknown;
              data: undefined;
              error: CustomError;
              failureCount: number;
              failureReason: null | CustomError;
              isError: true;
              isIdle: false;
              isPaused: boolean;
              isPending: false;
              isSuccess: false;
              mutateAsync: UseMutateAsyncFunction<QueryResponse<TData>, CustomError, Variables<TPath, TFormData, TExtraData>, unknown>;
              reset: (() => void);
              status: "error";
              submittedAt: number;
              variables: Variables<TPath, TFormData, TExtraData>;
          }
          | {
              context: unknown;
              data: QueryResponse<TData>;
              error: null;
              failureCount: number;
              failureReason: null | CustomError;
              isError: false;
              isIdle: false;
              isPaused: boolean;
              isPending: false;
              isSuccess: true;
              mutateAsync: UseMutateAsyncFunction<QueryResponse<TData>, CustomError, Variables<TPath, TFormData, TExtraData>, unknown>;
              reset: (() => void);
              status: "success";
              submittedAt: number;
              variables: Variables<TPath, TFormData, TExtraData>;
          }