Server Side Rendering & TRPC Router / Client Code

Hey guys I'm using t3 stack and trying to load data server side with hydration/dehydration - not sure I've done this right though. I've added another react-query (v5) provider with the hydration boundary in the page... Then realised there's already the TRPC context & provider, so I updated trpc server/client/next/react-query to: "@trpc/client": "next", "@trpc/next": "next", "@trpc/react-query": "next", "@trpc/server": "next", But it's all going wrong now 😄
>> query #1 focusList.getFocusLists { input: undefined }
<< query #1 focusList.getFocusLists {
input: undefined,
result: TRPCClientError: If you want to call this function on the server, you do the following:
This is a client-only function.

const caller = appRouter.createCaller({
/* ... your context */
});

const result = await caller.call('myProcedure', input);
at TRPCClientError.from (webpack-internal:///(rsc)/./node_modules/@trpc/client/dist/TRPCClientError-5f32366f.mjs:41:16)
at eval (webpack-internal:///(rsc)/./src/trpc/server.ts:63:98)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
meta: undefined,
shape: undefined,
data: undefined,
[cause]: Error: If you want to call this function on the server, you do the following:
This is a client-only function.

const caller = appRouter.createCaller({
/* ... your context */
});

const result = await caller.call('myProcedure', input);
at procedure (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/procedureBuilder-233a443d.mjs:294:19)
at callProcedure (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/router-f0c73097.mjs:133:12)
at eval (webpack-internal:///(rsc)/./src/trpc/server.ts:48:91)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
},
elapsedMs: 9
}
>> query #1 focusList.getFocusLists { input: undefined }
<< query #1 focusList.getFocusLists {
input: undefined,
result: TRPCClientError: If you want to call this function on the server, you do the following:
This is a client-only function.

const caller = appRouter.createCaller({
/* ... your context */
});

const result = await caller.call('myProcedure', input);
at TRPCClientError.from (webpack-internal:///(rsc)/./node_modules/@trpc/client/dist/TRPCClientError-5f32366f.mjs:41:16)
at eval (webpack-internal:///(rsc)/./src/trpc/server.ts:63:98)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
meta: undefined,
shape: undefined,
data: undefined,
[cause]: Error: If you want to call this function on the server, you do the following:
This is a client-only function.

const caller = appRouter.createCaller({
/* ... your context */
});

const result = await caller.call('myProcedure', input);
at procedure (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/procedureBuilder-233a443d.mjs:294:19)
at callProcedure (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/router-f0c73097.mjs:133:12)
at eval (webpack-internal:///(rsc)/./src/trpc/server.ts:48:91)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
},
elapsedMs: 9
}
Anyone have any experience with this?
1 Reply
Rich
Rich•11mo ago
Came back to this and realised the error of my ways, must have been half asleep at the time 😄 So I'm using the trpc server api in page.tsx to preload the data required for initial render and passing this to a prop of a subcomponent, and in the Component using the trpc client api useQuery with initialData set to the prop value
Want results from more Discord servers?
Add your server