jlarmst
jlarmst7mo 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
jlarmst
jlarmst6mo ago
Would it be better if I created a GitHub issue instead?
Nick
Nick6mo 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
jlarmst
jlarmst6mo 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
Nick6mo ago
You’ll need to check the networking between your servers, it’s not really a trpc problem
jlarmst
jlarmst5mo 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