useApiMutation Types

[maheraladdin]

Hello Antonio,
I hope you have a great day.
I found a way to add types to the useApiMutation hook, and the autocomplete works.

import { useState } from "react";
import { useMutation } from "convex/react";
import { FunctionReference } from "@/node_modules/convex/src/server";

interface ApiMutationReturnType<T extends FunctionReference<"mutation">> {
  pending: boolean;
  mutate: (payload: T["_args"]) => Promise<T["_returnType"] | void>;
}

/**
 * @description A hook to use a mutation from the API
 * @params mutation
 */
export function useApiMutation<Mutation extends FunctionReference<"mutation">>(
  mutation: Mutation,
): ApiMutationReturnType<Mutation> {
  const [pending, setPending] = useState(false);
  const apiMutation = useMutation(mutation);
  const mutate = async (payload: Mutation["_args"]) => {
    setPending(true);
    return await apiMutation(payload)
      .catch((error: any) => {
        throw error;
      })
      .finally(() => setPending(false));
  };

  return { mutate, pending };
}

[mad-coder-365]

Nice! Works well.

[omzi]

Nice one @maheraladdin. Here's what I came up with:

import { useState } from 'react';
import { useMutation } from 'convex/react';
import { FunctionReference, FunctionReturnType, OptionalRestArgs } from 'convex/server';

const useApiMutation = <Mutation extends FunctionReference<'mutation'>>(
  mutationFunction: Mutation
): {
  mutate: (...payload: OptionalRestArgs<Mutation>) => Promise<FunctionReturnType<Mutation>>;
  pending: boolean;
} => {
  const [pending, setPending] = useState(false);
  const apiMutation = useMutation(mutationFunction);

  const mutate = (...payload: OptionalRestArgs<Mutation>) => {
    setPending(true);
    return apiMutation(...payload)
      .finally(() => setPending(false))
      .then(result => result)
      .catch(error => { throw error });
  };

  return {
    mutate,
    pending
  };
};

export default useApiMutation;

[lavisar]

Hi guys, I have found the shortest way of type for mutation.
Hope it can help <3