Modify variables for useMutation inside onMutate

[rangelojc]

Is it possible to modify the vars passed in a mutation inside onMutate or any other side effects that I'm not aware of?

Consider this mutation hook

type VarType = {
lastCellId: number;
position: number;
}

export function useInsertCell() {
  const queryClient = useQueryClient();

  return useMutationWithAuth(insertCell, {
    onMutate: async (vars: VarType) => {
      await queryClient.cancelQueries({
        queryKey: ["cells", vars.pageId],
      });
      
      //I will perform some sorting here based on the query data to recalculate the official position of my newly added cell based on lastCell id
      const cachedCells: Cell[] = queryClient.getQueryData(["cells", vars.pageId]) || [];
      const newCell = {...vars, id: undefined}
      
      //Pretending the calculation is done
      
      //I want to update var.position here
      //I understand that this can be mutated, but isn't that an anti pattern?
      vars.position = cachedCells.find(c=>c.id === undefined).position;

      return {
        previousCells: queryClient.getQueryData([
          "cells",
          vars.pageId,
        ]),
        pageId: vars.pageId,
      };
    },   
  });
}

Is there anyway to "mutate" the mutation variable so I can send the correct payload to my API endpoint? Updating it directly seems like an anti pattern

Or do I have no choice but to do all of it before the mutation? I'm essentially trying to avoid using query client on my components, for SOC purposes.