CODEWITHSUNDEEP
next.jsapp-routertrpct3
huud-e
huud-e

Reputation: 3

How do i call a custom TRPCRouter on approuter in nextjs

I am having trouble adapting some code from pages to the app router in nextjs, i have this stripe trpc router

export const appRouter = createTRPCRouter({
  db: userRouter,
  account: accountRouter,
  stripe: stripeRouter,
});

and i am having trouble calling it, if i reference:

import { api } from '~/trpc/react';

in all the tutorials i am following i see they call api from utils/api but that was a thing for pages so i would apriciate any help!

import { api } from '~/trpc/react';

api.stripe.somefunction

and i get the following error:

Error: Cannot access stripe.somefunction on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

Upvotes: 0

Views: 138

Answers (1)

Kartik Chinda
Kartik Chinda

Reputation: 1

Adding a "use client" directive on top of my page.tsx (alternatively, wherever you're calling the api.stripe.getfunction) seems to fix the problem for me.

(PS I am not entirely sure how/why this error persists, so if someone could explain why this is so, that'd be great.)

Upvotes: 0

Related Questions