TTC
Theo's Typesafe Cult•13mo ago
Rich

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
RichOP•13mo 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

Did you find this page helpful?