hasanaktasTR•5mo ago

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) => {
     
    },
  });

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) => {
     
    },
  });

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) => {
     
    },
  });

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) => {
     
    },
  });

3 Replies

ballingt•5mo ago

Could you open this issue on the repo? @hasanaktasTR https://github.com/get-convex/convex-react-query/issues

GitHub

Issues · get-convex/convex-react-query

Contribute to get-convex/convex-react-query development by creating an account on GitHub.

ballingt•5mo ago

looks like a TypeScript issue we can fix

hasanaktasTROP•5mo ago

@ballingt https://github.com/get-convex/convex-react-query/issues/4

GitHub

Typescript error for useMutation · Issue #4 · get-convex/convex-rea...

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

Typescript error for @tanstack/react-query useMutation

Did you find this page helpful?