Luka
Luka8mo ago

Merging two clients into one

I have two clients. One for react-query for client components and one for server components. I wanna be able to call .query() or .useQuery() from the same object so you get one object for API calling on both server and client. I tried combining the two client objects with Object.assign. The types work as you can see in the screenshot but the object returned from Object.assign is empty. Wanna know what's the reason for that or what's the better way of doing this
No description
2 Replies
Nick
Nick8mo ago
Both are implemented with JS proxies, so you would have to write your own proxy wrapper over the two of them But I really just question why Is it so hard to import two variables? or grab the client from useUtils?
Luka
Luka8mo ago
just wanted to have one api object, seemed like a better workflow you pretty much would have access to both clients under one trpc source small update if anyone is gets interested in this in the future. you can merge the two proxies using this function
function mergeProxies<T, U>(client: T, server: U): T & U {
const proxy = new Proxy(
{},
{
get(_, prop) {
return (client as any)[prop] || (server as any)[prop];
},
},
);
return proxy as T & U;
}
function mergeProxies<T, U>(client: T, server: U): T & U {
const proxy = new Proxy(
{},
{
get(_, prop) {
return (client as any)[prop] || (server as any)[prop];
},
},
);
return proxy as T & U;
}
but the caveat is that when you get to your procedure/endpoint property the object that comes first when called in the function takes precedence.
export const api = mergeProxies(client, server);
export const api = mergeProxies(client, server);
like this you will get error Cannot access cart.getCartItems on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. if you do
export const api = mergeProxies(server, client);
export const api = mergeProxies(server, client);
you will get an error client[procedureType] is not a function so theres really no way to merge the two clients and have the auto suggestions the way it is in the screenshot at the start. some merge function from trpc library could be cool for this, or a client for nextjs 13 that allows both simple queries for server components and react-query for client components
More Posts
Is it possible to only use WebSockets when necessary, otherwise use httpbatch or http?I have an application, and on certain pages I need live data. Is there a way to only have tRPC open Zod transform typesI have a zod type for our backend requirements that looks like this: ```javascript const ZCustomTypeuseQuery in App Router?I have a client component that I want to use useQuery in like in pages router, but only `query` is aTranform output data using middleware after handler has run - possible?As the title says, been trying for a couple of hours to modify the return type of the data using midCan we configure cache on a per-request basis?Hi! I’m a big fan of tRPC! I’ve been using it for quite some time. I actually have 2 questions: ## Error in tRPC with Clerk in t3-app routerHi guys, im trying to implement clerk auth in t3 app router. But it gives me this error when im tryiError when converting string from router.query to prisma DB enumHey yall, I'm working on a Next.js application using tRPC and Prisma, and I've encountered an invaliNext.js tRPC router separated to edge-runtime and node-runtimeI would like to separate server into two runtimes - most things can run on edge-runtime, but I have [How To?] Create a record in database on form submission...I have an application using trpc, Cloudfare D1 database, and trpc. I am trying to use a tamagui forHow to obfuscate data via transformerEnd user with adequate knowledge can easily copy JSON data in plain text from network requests in br