Why can't I access the data returned from onSuccess in my react-query mutation?

I am trying to get my head round react query and can't get past a particular issue. I want to add a new month record and on creation of this, fire off a dependent process. I am therefore using onSuccess, expecting the data just created to be returned but this is always "undefined".

Here is my code for the mutation:

import { useMutation, useQueryClient } from 'react-query';
import toast from 'react-hot-toast';

import { axiosInstance, getJWTHeader } from '../../../../api/axiosInstance';
import { queryKeys } from '../../../../react-query/constants';
import { useUser } from '../../../User/hooks/useUser';
import { useHistoryProcessing } from '../../../../hooks/useHistoryProcessing';

async function addMonth(newMonth, user) {
  if (!newMonth) return null;
  const { data } = await axiosInstance.post(
    '/months',
    { newMonth },
    { headers: getJWTHeader(user) }
  );
  return data.month;
}

export function useMonthPost() {
  const { user } = useUser();
  const { ProcessHistory } = useHistoryProcessing();
  const queryClient = useQueryClient();

  const { mutate: addNewMonth } = useMutation(
    (newMonthData) => addMonth(newMonthData, user),
    {
      onMutate: async () => {
        queryClient.cancelQueries(queryKeys.months);
      },
      onError: (error) => {
        toast(error);
      },
      onSettled: () => {
        queryClient.invalidateQueries(queryKeys.months);
      },
      onSuccess: (data) => {
        console.log(data);
        ProcessHistory(data);
      },
    }
  );
  return addNewMonth;
}

There could be a few reasons why this is happening:

1. Double-check the mutation configuration: Make sure that the mutation is configured correctly, and the server is returning the newly created data in the response. Check the API documentation or the code responsible for handling the creation of the month record to ensure that it returns the created data.

2. Verify the shape of the returned data: If the server response contains nested data or has a different structure than expected, accessing data directly might not work. In this case, you need to traverse the response object to access the desired data. For example, if the response object looks like { data: { month: { id: 1, name: 'June' } } }, you would access the created month data using response.data.month.

3. Check for error handling: If there are any errors during the mutation process, the onError callback will be triggered instead of onSuccess. Make sure you're not accidentally handling the error case and expecting the created data in the onSuccess callback.

4. Consider using async/await: If you are making an asynchronous call within the onSuccess callback to fetch additional data or perform another operation, ensure that you are handling promises correctly. You can use async/await or .then() to wait for the asynchronous operation to complete before proceeding.

> I am therefore using onSuccess, expecting the data just created to be returned but this is always "undefined".

First of all, your onSuccess callback doesn't return anything - seems like it's missing a return statement:

onSuccess: (data) => {
  console.log(data);
  ProcessHistory(data);
},

but second, onSuccess is an event handler. You can do something with data, but it's not there to transform data. This is pretty common with functions named onXXX.

Whatever is returned from the mutationFn will be available as data in your component, so if you want post-processing, do it inside the mutationFn:

useMutation(
    async (newMonthData) => {
      const data = await addMonth(newMonthData, user)
      const processed = ProcessHistory(data)

      return processed
   }
)

</details>