T
tRPC

❓-help

How can i createCaller from a NextJs App Router if my server uses express tRPC adapter?

KKylar1/24/2024
I'm using the express adapter for the server side of tRPC, and the client is a NextJS AppRouter app. I was getting to setting up the createCaller helper to be able to call from RSC, but createCaller needs the context, which for the express adapter is the request and response objects. The issue here is that I don't actually have the request/response objects in NextJS App router by design (https://nextjs.org/docs/app#how-can-i-access-the-request-object-in-a-layout), which leaves me unsure about how to move forward Is tRPC unusable with this setup? Do I need a proxy adapter or is there some piece that I am missing?
Solution:
I ended up creating a wrapper around createTRPCProxyClient that grabbed the cookies and injected the authToken into trpc using httpBatchLink like so: ```export const createTRPCServerClient = async () => { const authToken = ""; // Grab from cookies return createTRPCProxyClient<AppRouter>({...
Jump to solution
App Router | Next.js
Use the new App Router with Next.js' and React's latest features, including Layouts, Server Components, Suspense, and more.
BBillyBob1/24/2024
You might not need the createCaller look how its done here: https://github.com/juliusmarminge/acme-corp/ Do you have separated servier and client ?
Solution
KKylar1/24/2024
I ended up creating a wrapper around createTRPCProxyClient that grabbed the cookies and injected the authToken into trpc using httpBatchLink like so:
export const createTRPCServerClient = async () => {
const authToken = ""; // Grab from cookies
return createTRPCProxyClient<AppRouter>({
transformer: superjson,
links: [
httpBatchLink({
url: "http://your-url.com/api/trpc",
headers: {
...(authToken ? { authorization: `Bearer ${authToken}` } : {}),
},
}),
],
});
};
export const createTRPCServerClient = async () => {
const authToken = ""; // Grab from cookies
return createTRPCProxyClient<AppRouter>({
transformer: superjson,
links: [
httpBatchLink({
url: "http://your-url.com/api/trpc",
headers: {
...(authToken ? { authorization: `Bearer ${authToken}` } : {}),
},
}),
],
});
};
BBillyBob1/24/2024
You should be able to just pass all headers like this: headers: Object.fromEntries(headers()), import { headers } from 'next/headers' make sure you have 'use server' at the top

Looking for more? Join the community!

Recommended Posts
Is there a way to refetch a query with new parameters?Hi I'm using tRPC in a Next.js app and I have a button that a user can click to get the latest dataMultiple Routers with WebsocketsHi. I am looking to create two routers with either the same websocket connection or two unique websoIs there any benefit to putting the db connection in the context versus having it as an global var?Can I do this? ```ts export const challengesRouter = router({ getChallengeById: privateProcedure Controller is already closed crashIm using trpc with nextjs 14 app router and started to see that my app crashes due to such error. DiThis page needs to bail out of prerendering at this point because it used revalidate: 0I've been testing out partial prerendering with next using tRPC but having some issues. Everytime How to infer query types on client?```ts export const tenantRouter = router({ getTenants: procedure.query(() => { return { hello:NextJS Output TypingsQuick question probably stupid, I learned about this library yesterday and completely migrated from 'react-server-dom-webpack/client' errorHey, i am trying to get started with TRPC but getting this error ```shell ../../node_modules/.pnpm/React Query client errors on 401I'm throwing a `TRPCError({ code: "UNAUTHORIZED" })` in a middleware, and handling error states retuExtremely slow queriesI'm having elapsed time of 2 to 5 seconds and I just switched from mongo to postgres. Is it the DB lTRPC works but getting unpredictable Typescript warnings for a barebones trpc monorepo projectHi, TRPC is working as expected but there are many warnings that feels very "off" for simple proceduKirimase's tRPC usage CRUD routeHey, using Nico's Kirimase tRPC package. I am trying to call the queries and mutations, in the db/scClient `tsc` checking server codeI have a trpc server and vite/react client set up in a pnpm monorepo. The VSCode type checking is beUnable to set up a client side subscription to a trpc route that supports websocketsI wrote the code on the client side here to query the subscription: https://github.com/sumanthneerumwhat's this union type doing(Zod)?I have 2 types of user, guest and registered(schemas). I have a union type with both and the guest dtrpc's useQuery with undefined input adds extra {"values":["undefined"]} to queryMy React app has several calls to query endpoints that have no input data but that do need useQuery