Convex CommunityCCConvex Community
Powered by
hasanaktasTRH
Convex Community•2y 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) => {
     
    },
  });
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) => {
     
    },
  });
image.png
image.png
Convex Community banner
Convex CommunityJoin
Join the Convex Discord! Explore Convex, the backend platform that keeps your app in sync.
15,138Members
Resources
Recent Announcements

Similar Threads

Was this page helpful?
Recent Announcements
james

Hi @everyone with everything going on today I forgot to post on discord about our EU launch! We have a region in Dublin now! You can start using it immediately, even for folks on the free plan. https://news.convex.dev/we-finally-got-our-eu-visa/ Stay tuned for more regions but also stay tuned for more infra improvements where we improve latency for teams no matter where their servers are located. Just at the tip of the iceberg re all the optimizations we have lined up.

james · 4d ago

Wayne

Hi @everyone happy Monday. Components Authoring [Challenge](https://www.convex.dev/components/challenge) updates! Meet the second batch of community-approved components **Firecrawl Scrape **- Scrape any URL and get clean markdown, HTML, screenshots, or structured JSON - with durable caching and reactive queries. https://www.convex.dev/components/firecrawl-scrape Built by: Gitmaxd **Durable Agents **- A Convex component for building durable AI agents with an async tool loop. https://www.convex.dev/components/durable-agents Built by: Siegfried **Convex Debouncer** - A server-side debouncing component for debouncing expensive operations like LLM calls, metrics computation, or any heavy processing that should only run after a period of inactivity. https://www.convex.dev/components/debouncer Built by: Ilya **DatabaseChat **- A Convex component for adding natural language database queries to your app. https://www.convex.dev/components/database-chat Built by: Nick **Transloadit** - A Convex component for creating Transloadit Assemblies, handling resumable uploads with status, and persisting status/results in Convex. https://www.convex.dev/components/transloadit Built by: Kvz **Loops** - A Convex component for integrating with Loops.so email marketing platform. https://www.convex.dev/components/loops Built by: Bobby The [challenge](https://www.convex.dev/components/challenge) is now ongoing, so keep building, and we'll keep rewarding. Thanks, everyone!

Wayne · 3w ago

Liz C

Hi everyone! Have you ever wanted to get your hands on some convex swag? Well you're in luck! We just launched our Convex swag store. Check it out here ---> https://store.convex.dev/

Liz C · 3w ago

Similar Threads

Typescript error for @tanstack/react-query when extra parameter is added
hasanaktasTRHhasanaktasTR / support-community
2y ago
Returning data from Tanstack Query useMutation wrapper
DiamondDragonDDiamondDragon / support-community
15mo ago
usePaginatedQuery with tanstack react query:
gwilliamnnGgwilliamnn / support-community
7mo ago
Convex Paginated Query with TanStack React Query
sircheferooSsircheferoo / support-community
15mo ago