How to pass extra data to tanstack useMutation? How create custom useMutation?

[alkosorukov]

I have several requests to add and change data:

 const updateRwStationsQuery = (id: string, data: RwStationDto) => {
    return apiInstance<RwStationDto>(`/rwstations/${id}`, {
        method: 'PUT',
        json: data,
    });
};

 const addRwStationsQuery = (data: RwStationDto) => {
    return apiInstance<RwstationDto>(`/rwstations`, {
        method: 'POST',
        json: data,
    });
};

export const useUpdateRwStations = () => {
    const queryClient = useQueryClient();
    const mutation = useMutation({
        mutationFn: ({ id, data }: { id: string; data: RwstationDto }) => {
            return id ? updateRwStationsQuery(id, data) : addRwStationsQuery(data);
        },
        async onSuccess() {
            queryClient.invalidateQueries({ queryKey: ['rw-station', 'get] });
        },
    });

    const handleUpdate = (id: string, data: RwstationDto) => {
        mutation.mutate({ id, data });
    };

    return { handleUpdate };
};

Now, along with this data, I need to transfer the user's ID, which is stored in zustand: const {user} = userModel(). I could write something like

export const useUpdateRwStations = () => {
    const {user} = userModel();
    const queryClient = useQueryClient();
    const mutation = useMutation({
        mutationFn: ({ id, data }: { id: string; data: RwstationDto }) => {
            return id ? updateRwStationsQuery(id, {...data, userId: user?.id}) : addRwStationsQuery({...data, userId: user?.id});
        },

but there are a lot of requests and it may be necessary to add something else. How to write custom useMutation so that it takes and adds what is needed?

I assumed something like:

const useCustomMutation = <TData = unknown, TError = DefaultError, TVariables = void, TContext = unknown>(options: UseMutationOptions<TData, TError, TVariables, TContext>, queryClient?: QueryClient): UseMutationResult<TData, TError, TVariables, TContext> => {
 const {user} = userModel(); 
const mutation = useMutation({ ...options, mutationFn: ({ id, data })=>options?.mutationFn({id, data:{...data, userId: user?.id}}), // there is a problem with typing }); 
return mutation ; 
}; 

[TkDodo]

this is pretty hard to type generically. the version where you close over useUserModel() is fine imo.

[alkosorukov]

https://codesandbox.io/p/sandbox/chxx2k?file=%2Fsrc%2FcustomUseMutation.ts%3A23%2C18 How to fix typing errors?