T
TanStack•2mo ago
deep-jade

createTRPCContext vs createTRPCReact

Greetings. So, I recently started building my first fullstack app with TanStack Start. I've been using little bit of docs and AI to understand how things work. Recently I've come across rather a strange error / issue. Within various github examples that use tech stack similar to what I've chosen, I've noticed devs have created TRPC context using createTRPCReact instead of createTRPCContext (example repo: https://github.com/tinrab/tanstack-start-trpc/blob/main/app/trpc/client.ts, https://github.com/TanStack/router/blob/main/examples/react/with-trpc/src/trpc.ts old but relevant). However, when I initilized a fresh tanstack start app, I got one already created with createTRPCContext and that from @trpc/tanstack-react-query. I don't know but perhaps, due to this, I am unable to call useMutation hook. My code: https://github.com/JealousGx/Corentix/blob/main/src/components/EndpointModal.tsx
GitHub
router/examples/react/with-trpc/src/trpc.ts at main · TanStack/router
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
GitHub
Corentix/src/components/EndpointModal.tsx at main · JealousGx/Core...
Contribute to JealousGx/Corentix development by creating an account on GitHub.
3 Replies
deep-jade
deep-jadeOP•2mo ago
even trpcClient imported from @/integrations/tanstack-query/root-provider does not have useMutation hook. I'm only able to access mutate func from it that returns a promise. Seems like I also cant access query func either Bump...
foreign-sapphire
foreign-sapphire•2mo ago
You import useMutation like this import { useMutation } from "@tanstack/react-query"; and use it like this 
const trpc = useTRPC();
  const logoutMutation = useMutation(
    trpc.auth.logout.mutationOptions({
      onSuccess: () => {
        navigate({ to: "/admin/login" });
      },
      onError: (error) => {
        console.error("Logout failed:", error);
        navigate({ to: "/admin/login" });
      },
    })
  );
const trpc = useTRPC();
  const logoutMutation = useMutation(
    trpc.auth.logout.mutationOptions({
      onSuccess: () => {
        navigate({ to: "/admin/login" });
      },
      onError: (error) => {
        console.error("Logout failed:", error);
        navigate({ to: "/admin/login" });
      },
    })
  );
Seeing as you mentioned this is your first full-stack project perhaps you should start a little simpler, stuff like tRPC especially when combined with other libraries are pretty complicated and you'll shoot yourself in the foot if you don't understand what is happening
deep-jade
deep-jadeOP•2mo ago
oh, right. thanks And no, this isn't my first full stack project in my life. It's just that some tech stack that I'm using for this project is new to me like tss, react query/ and what fun is it to work with just 1 tech in this era.

Did you find this page helpful?