Retrieving mutation/query key in onError and onSuccess

[bartschriever]

Is it possible to retrieve the mutation or query key in the onSuccess and onError functions?

I currently have the following code:

export default function useRemoveLineItemMutation({ onSuccess, onError }: Props) {
  return useMutation<null, unknown, { id: string }, unknown>({
    context: queryClientContext,
    mutationKey: ['remove-id'],
    mutationFn: async ({ id }): Promise<null> => {
      const { data } = await httpClient.removeId(id);
  
      return data;
    },
    retry: false,
    onSuccess: (data, variables, context) => {
      // I want to get the mutationKey here so we can perform additional actions.
      console.log('Data:', data);    // is null
      console.log('Variables:', variables);    // is { id: '123' }
      console.log('Context:', context);    // is undefined

      if (typeof onSuccess === 'function') {
        onSuccess(data);
      }
    },
    onError: (error, variables, context) => {
      // I want to get the mutationKey here so we can perform additional actions.
      console.log('Error:', error);    // is the Axios error
      console.log('Variables:', variables);    // is { id: '123' }
      console.log('Context:', context);    // is undefined

      if (typeof onError === 'function') {
        onError(error);
      }
    },
  });
}

Unfortunately, I initially thought it was possible to obtain the key from the context. However, I have been unable to find relevant information about this context, and my searches on the internet haven't yielded any valuable insights.

The reason I want to have the mutation/query key is that we will use this in the callback function that is provided to the mutation.

I hope somebody can provide assistance or shed more light on this matter.

Kind regards,
Bart

[TkDodo]

the mutationKey is right there, where you pass it to useMutation:

const useMyMutation = () => {
  const mutationKey = ['remove-id']

  return useMutation<null, unknown, { id: string }, unknown>({
    mutationKey,
    mutationFn: async ({ id }): Promise<null> => {
      const { data } = await httpClient.removeId(id);

      return data;
    },
    onSuccess: () => {
      console.log('mutationKey', mutationKey)
    },
  }
});

[bartschriever]

Oh yeah, this is really stupid. I think sometimes a whole day of coding can drive your mind crazy.