Two trpc t3 stack apps, trpc call between the two.
Hi. I am trying to make a trpc client for app A which will call app B trpc route handler. I setup the batchlink with URL of app B, importing B approuter. But it keep calling A app's router handler at /api/trpc instead of cross origin call to app B. I copied the default api.ts and changed URLs and Approuter in there. Is there anything else I need to do?
4 Replies
I changed createTRPCNext to createTRPCProxyClient. Now B received and executes the request. but in browser with app A open, I am getting cross origin issue: Origin http://localhost:3001 is not allowed by Access-Control-Allow-Origin. Status code: 204 . But server B is executed the request..i.e pulled data from DB. Confusing.
CORS issue is solved by adding following at both ends: headers: async () => {
return [
{
source: "/api/:path",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "" }, // replace this with your actual origin in production
{
key: "Access-Control-Allow-Methods",
value: "GET,DELETE,PATCH,POST,PUT",
},
{
key: "Access-Control-Allow-Headers",
value:
"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version,trpc-batch-mode",
},
],
},
];
},
now, I need to figure out how to get useQuery working, right now it is just: const data = exchangeApi.purchase.getAllProjects.query({ key: "123" });
a trpc client for app A which will call app B trpc route handlerCalling a tRPC route externally is not recommended. you might have more success with exposing a procedure as a Next.js API endpoint or using a lib such as
trpc-openapi
Full explanation in the t3 docs: https://create.t3.gg/en/usage/trpc#how-do-i-call-my-api-externallyIf you own both apps, why call it through tRPC? It seems like a monorepo with a shared api library may be a better path
@Rhys as reece It is a monorepo. The plan is to have 3-4x apps in it , with shared ui & config packages. The apps will have their own db&trpc setup, plus communicating with 2 common API. The API endpoints will also be upsold to 3rd parties. So my plan was to make apps communicate with the API app via trpc, so I have single common code style. I.e everything done via TRPC & tanstack query, and avoid the whole mess of using fetches, states and etc.