rising-crimson

typescript type when I pass an onSuccess callback to my custom hook

Hey guys, I have this custom hook and I want to be able to pass a onSuccess callback to it, but I don't know which type should I use here ? I have done this but if the type returned from the function change i will have to change the type, is there some more opitmal?

export const usePatchCampaign = ({
  onSuccess,
}: {
  onSuccess: (param: ExperimentV1<ExclusionGroupWithArchived> | undefined) => void;
}) => {
  return useMutation({
    mutationFn: () => {}
    onSuccess,
  });
};

export const usePatchCampaign = ({
  onSuccess,
}: {
  onSuccess: (param: ExperimentV1<ExclusionGroupWithArchived> | undefined) => void;
}) => {
  return useMutation({
    mutationFn: () => {}
    onSuccess,
  });
};

6 Replies

conscious-sapphire•15mo ago

onSuccess: UseMutationOptions[„onSuccess“]

rising-crimsonOP•15mo ago

Hey thank for your answer but when I tried to do that I had a typescript error:

export const usePatchCampaign = ({
  onSuccess,
}: {
  onSuccess?: UseMutationOptions['onSuccess'];
} = {}) => {
  const accountId = useCurrentAccountId();
  const dispatch = useAppDispatch();
  const { updateCampaign } = useUpdateCampaign();
  return useMutation({
    mutationFn: async ({ campaignId, payload }: { campaignId: number; payload: ExperimentPatch }) => {
      try {
        const updatedCampaign = await apiClient.v1.experiment.patch({ accountId, testId: campaignId, payload });
        updateCampaign(updatedCampaign);
        return updatedCampaign;
      } catch (error) {
        if (isApiError(error)) {
          dispatch(
            handleModificationError({
              error,
            })
          );
        }
      }
    },
    onSuccess,
  });
};

export const usePatchCampaign = ({
  onSuccess,
}: {
  onSuccess?: UseMutationOptions['onSuccess'];
} = {}) => {
  const accountId = useCurrentAccountId();
  const dispatch = useAppDispatch();
  const { updateCampaign } = useUpdateCampaign();
  return useMutation({
    mutationFn: async ({ campaignId, payload }: { campaignId: number; payload: ExperimentPatch }) => {
      try {
        const updatedCampaign = await apiClient.v1.experiment.patch({ accountId, testId: campaignId, payload });
        updateCampaign(updatedCampaign);
        return updatedCampaign;
      } catch (error) {
        if (isApiError(error)) {
          dispatch(
            handleModificationError({
              error,
            })
          );
        }
      }
    },
    onSuccess,
  });
};

rising-crimsonOP•15mo ago

rising-crimsonOP•15mo ago

No overload matches this call. The last overload gave the following error. Argument of type '{ mutationFn: ({ campaignId, payload }: { campaignId: number; payload: ExperimentPatch; }) => Promise<ExperimentV1<ExclusionGroupWithArchived> | undefined>; onSuccess: ((data: unknown, variables: void, context: unknown) => unknown) | undefined; }' is not assignable to parameter of type 'MutationKey'. Object literal may only specify known properties, and 'mutationFn' does not exist in type 'readonly unknown[]'.ts(2769) useMutation.d.ts(6, 25): The last overload is declared here. Do you know why?

conscious-sapphire•15mo ago

Another suggestion instead of doing this type gymnastics: you can do mutate(var, {onSuccess}) in the component where you use the hook. Is a a better solution in general and also simpler 🙂

ratty-blush•15mo ago

Just be aware there's a difference between onSuccess on the mutation vs via mutate https://tanstack.com/query/latest/docs/framework/react/guides/mutations#consecutive-mutations

Mutations | TanStack Query React Docs

Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects. For this purpose, TanStack Query exports a useMutation hook. Here's an example of a mutation that adds a new todo to the server:

Gaming

Programming

typescript type when I pass an onSuccess callback to my custom hook

Did you find this page helpful?