Get useMutation options type

Hey there! I'm trying to put a useMutation call into a custom hook to define explicitly the types. I want to pass the useMutation options to this new hook and then send all those props down to the original useMutation with the same types it figures out. I peeked at the type definitions, but it's not working like I thought it would. Any tips on how to make this happen?

Current code:

async function deleteFormRequestQuery(id: string) {
  try {
    const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
    return data;
  } catch (error) {
    // eslint-disable-next-line @typescript-eslint/no-throw-literal
    throw "Error";
  }
}

const useDeleteMutation = () => {
  const mutation = useMutation({
    mutationKey: ["Hi"],
    mutationFn: deleteFormRequestQuery,
  });

  return mutation;
};

async function deleteFormRequestQuery(id: string) {
  try {
    const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
    return data;
  } catch (error) {
    // eslint-disable-next-line @typescript-eslint/no-throw-literal
    throw "Error";
  }
}

const useDeleteMutation = () => {
  const mutation = useMutation({
    mutationKey: ["Hi"],
    mutationFn: deleteFormRequestQuery,
  });

  return mutation;
};

async function deleteFormRequestQuery(id: string) {
  try {
    const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
    return data;
  } catch (error) {
    // eslint-disable-next-line @typescript-eslint/no-throw-literal
    throw "Error";
  }
}

const useDeleteMutation = () => {
  const mutation = useMutation({
    mutationKey: ["Hi"],
    mutationFn: deleteFormRequestQuery,
  });

  return mutation;
};

async function deleteFormRequestQuery(id: string) {
  try {
    const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
    return data;
  } catch (error) {
    // eslint-disable-next-line @typescript-eslint/no-throw-literal
    throw "Error";
  }
}

const useDeleteMutation = () => {
  const mutation = useMutation({
    mutationKey: ["Hi"],
    mutationFn: deleteFormRequestQuery,
  });

  return mutation;
};

What i want:

async function deleteFormRequestQuery(id: string) {
  try {
    const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
    return data;
  } catch (error) {
    // eslint-disable-next-line @typescript-eslint/no-throw-literal
    throw "Error";
  }
}

// Want this props to have the same type as the ones inside the useMutation.
const useDeleteMutation = (props: UseMutationProps) => {
  // Here I maybe define explicitly the types on useMutation
  const mutation = useMutation({ // <- This types
    mutationKey: ["Hi"],
    mutationFn: deleteFormRequestQuery,
    ...props
  });

  return mutation;
};

async function deleteFormRequestQuery(id: string) {
  try {
    const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
    return data;
  } catch (error) {
    // eslint-disable-next-line @typescript-eslint/no-throw-literal
    throw "Error";
  }
}

// Want this props to have the same type as the ones inside the useMutation.
const useDeleteMutation = (props: UseMutationProps) => {
  // Here I maybe define explicitly the types on useMutation
  const mutation = useMutation({ // <- This types
    mutationKey: ["Hi"],
    mutationFn: deleteFormRequestQuery,
    ...props
  });

  return mutation;
};

async function deleteFormRequestQuery(id: string) {
  try {
    const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
    return data;
  } catch (error) {
    // eslint-disable-next-line @typescript-eslint/no-throw-literal
    throw "Error";
  }
}

// Want this props to have the same type as the ones inside the useMutation.
const useDeleteMutation = (props: UseMutationProps) => {
  // Here I maybe define explicitly the types on useMutation
  const mutation = useMutation({ // <- This types
    mutationKey: ["Hi"],
    mutationFn: deleteFormRequestQuery,
    ...props
  });

  return mutation;
};

async function deleteFormRequestQuery(id: string) {
  try {
    const { data } = await pricingApi.delete(`${environment.FORM}/${id}`);
    return data;
  } catch (error) {
    // eslint-disable-next-line @typescript-eslint/no-throw-literal
    throw "Error";
  }
}

// Want this props to have the same type as the ones inside the useMutation.
const useDeleteMutation = (props: UseMutationProps) => {
  // Here I maybe define explicitly the types on useMutation
  const mutation = useMutation({ // <- This types
    mutationKey: ["Hi"],
    mutationFn: deleteFormRequestQuery,
    ...props
  });

  return mutation;
};

Get useMutation options type

Similar Threads

Similar Threads

Similar Threads