How can I pass variables to a mutateAsync?

Question

I'm using tanstackreact-query and i'm having issues passing variables to a useMutation fn.

Query

export const useSaleData = {
  listAll: () => {
    return useQuery<any, any>({
      queryKey: ['fetchAllSales'],
      queryFn: saleServices.fetchAll,
    });
  },
  create: () => {
    return useMutation<any, any>({
      mutationKey: ['createSale'],
      mutationFn: async ({ customerId, saleDetail }: any) => {
        return await saleServices.create({
          customerId,
          saleDetail,
        });
      },
    });
  },
};

Component

const { data: createSaleData, mutateAsync: mutateSale } =
        useSaleData.create();

const onCreateSale = async () => {
   const sale = await mutateSale({
      customerId: customer.id,
      salesDetail: orderList,
    });
 };   

Error Argument of type '{ customerId: any; saleDetail: any[]; }' is not assignable to parameter of type 'void'.

I've read documentation and it says that mutate receives the first parameter as variables. Can someone point me in the right direction?

Answer 1

If you pass type parameters to useMutation like so:

useMutation<any, any>

you're opting out of type inference. But useMutation has 4 type parameters, so the other two get their defaults assigned. One of them is TVariables, and that defaults to void.

So bottom line: get rid of the angle brackets <> and use type inference