jlarmstJ
tRPC•3y ago•
8 replies
jlarmst

SSR with initialData throws error

I'm using SSR with Astro and have a client that looks like 
export type TfdExampleGreet = RouterOutput["tfdExample"]["greet"];
export type TfdExampleClientTrpcProps = {
  readonly initialData?: TfdExampleGreet;
};
function TfdExampleClientTrpc({
  initialData,
}: TfdExampleClientTrpcProps): JSX.Element {
  const [greet, greetQuery] = trpc.tfdExample.greet.useSuspenseQuery(
    "there tfdExample!",
    {
      initialData,
    },
  );

  console.log({ greet, greetQuery });

  return <p>{greet.greeting}</p>;
}

It works fine if I create a client:only react component or if I fetch the data with the vanilla client in Astro.

But, trying to use SSR with the component and passing the initialData received from the vanilla client throws an error
<template data-msg="Unexpected token U in JSON at position 4" data-stck="
    at TfdExampleClientTrpc (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55136:16)
    at Suspense
    at ErrorBoundary (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:51192:9)
    at DefaultFallback (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55052:3)
    at QueryClientProvider (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:53955:7)
    at TRPCProvider (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:54537:13)
    at TrpcProvider (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55107:25)
    at ClientTrpc (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55120:3)"></template>

Also, I'm using v11
    "@trpc/client": "11.0.0-alpha-next-2023-12-15-18-34-32.118",
    "@trpc/react-query": "11.0.0-alpha-next-2023-12-15-18-34-32.118",
    "@trpc/server": "11.0.0-alpha-next-2023-12-15-18-34-32.118",

Also, I know that the initialData is not undefined because I'm rendering it to the screen with Astro
Was this page helpful?