Merging two clients into one

LLuka

11/11/2023

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

Nnlucas

11/11/2023

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?

LLuka

11/11/2023

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

Looking for more? Join the community!

tRPC

Merging two clients into one

Join Server

tRPC

Merging two clients into one

Join Server

Recommended 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 ZCustomType useQuery in App Router?I have a client component that I want to use useQuery in like in pages router, but only `query` is a Tranform 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 mid Can 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 tryi Error 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 invali Next.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 for How to obfuscate data via transformerEnd user with adequate knowledge can easily copy JSON data in plain text from network requests in br Response delay from TRPC using postgresqlI'm using TRPC as backend and for the database using postgresql so while creating using facing delay Capture TRPCClientError so that it does not show in the client's browser consoleIf a TRPCError is thrown from a router procedure, the client will receive a TRPCClientError that wil Netlify function EMFILEIf this is a dumb question just point me in the direction of the stackoverflow. I've scoured discor empty `input` object when using mutationWhen using `useQuery` I have no issues even with input but when using `useMutation`. The backend is Returning html with TRPCIs it possible to return content-types other than JSON, so HTML for example? I have a requirement th Specify invalid queries from the server?I have a TRPC app that I am writing and there are times I would like to invalidate queries on the cl Automatically notify about excess queried fields.Hello! Imagine very common situation: We picking "user" with 10 fields, but using only 3 of them in The inferred type of 'trpc' cannot be named without a reference ...Hey everyone, I just changed around the structure of my monorepo where I now have my nextjs applica trpc mutations for searching dataRecently was told that using mutations to fetch list data is bad. I can agree with this on a high le The inferred type of 'trpc' cannot be named without a reference. A type annotation is necessary.Hello everybody... I have a nodejs + reactjs + yarn monorepo using turbo. I am getting this error wh