hasanaktasTRH
Convex Community2y ago
3 replies
hasanaktasTR

Typescript error for @tanstack/react-query useMutation

import { api } from "@backend/convex/_generated/api";
import { useMutation } from "@tanstack/react-query";
import { useConvexMutation } from "@convex-dev/react-query";


  const mutation = useMutation({
    mutationFn: useConvexMutation(api.explore.react),

    onSuccess: async (data) => {
    
    },
    onError: async (error) => {
     
    },
  });


If I use it as specified in the document, there is no problem. However, when I try to access the API variables, TypeScript gets angry. The type of the variables is void.


import { api } from "@backend/convex/_generated/api";
import { useMutation } from "@tanstack/react-query";
import { useConvexMutation } from "@convex-dev/react-query";


  const mutation = useMutation({
    mutationFn: useConvexMutation(api.explore.react),

    onSuccess: async (data,variables) => {
    
    },
    onError: async (error,variables) => {
     
    },
  });



As a solution, if I create mutationFn as an external variable, typescript does not give an error and the type of the variables is shown correctly.

import { api } from "@backend/convex/_generated/api";
import { useMutation } from "@tanstack/react-query";
import { useConvexMutation } from "@convex-dev/react-query";


  const mutationFn = useConvexMutation(api.explore.react);

  const mutation = useMutation({
    mutationFn: mutationFn,

    onSuccess: async (data,variables) => {
    
    },
    onError: async (error,variables) => {
     
    },
  });
image.png
image.png
Was this page helpful?