jlarmst•12mo ago

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>;
}

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>

<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",

    "@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

5 Replies

jlarmstOP•12mo ago

Would it be better if I created a GitHub issue instead?

Nick•12mo ago

"Unexpected token U in JSON at position 4" says all you need to know, a malformed message is coming back from the API, which is often more to do with the infrastructure between the client and the api

jlarmstOP•11mo ago

It's bizarre, since it works fine in development. Are there additional logs or debugging steps I can use to investigate further? I guess I'm confused because it works great with the vanilla client in an astro component, and works great with a client-only react component. Only when I try to use SSR and initialData with react do I get an error

Nick•11mo ago

You’ll need to check the networking between your servers, it’s not really a trpc problem

jlarmstOP•11mo ago

It works in the two other cases (Astro server component and react client component), so I suspect the issue is with the initialData props in the React SSR component.
The typescript types seems to indicate that I can pass the expected return value of the query as the initialData (which I fetch successfully from the trpc endpoint in the Astro server component), but perhaps I should pass something else like raw response or body? The same exact query works perfectly on the client if I don’t use initialData I believe the final answer is that initialData should never be undefined, unless using client:only