T
tRPC

❓-help

SSR with initialData throws error

Jjlarmst12/16/2023
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
Jjlarmst12/23/2023
Would it be better if I created a GitHub issue instead?
Nnlucas12/23/2023
"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
Jjlarmst12/28/2023
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
Nnlucas12/29/2023
You’ll need to check the networking between your servers, it’s not really a trpc problem
Jjlarmst1/26/2024
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

Looking for more? Join the community!

Recommended Posts
How to cache trpc server request next.js app routeris it the right way ctx.headers.set( "Cache-Control", "public, max-age=43200, stale-whileThe property '$request' in your router collides with a built-in methodHas anybody seen this error before? I cant make sense of itTrpc calls being uncessarily madeHi friends, i am relevatively new to TRPC so this could be somethign super basic. I have a componentGet Name of All Query Routes or Mutation RoutesTypescript is pretty unhappy with my methods of doing this manually, so wondering if there are any oLosing Types in VSCodeI'm encountering a curious issue with type inference in my project and wondering if anyone else has useUtils vs useQueryClientI'm trying to use the `useUtils` hook but I'm unsure if I'm doing it correctly? It doesn't seem to wErrors serializationAre the errors now using the transformer serialize? or the errors simply go through errorsTransformeBuild error with trpc-panelHi. I'm having a trouble building my tRPC api with trpc-panel. I'm using yarn workspaces and tryingTransferring huge bufferI'm using tRPC with superjson serializer in an Electron app. I have a router querry that loads an pnReport progress of mutationI'm using tRPC in a electron app and am running a nodeWorker from main thread. Is there a way to repDiscriminated output based on discrimiated inputI have this function which works correctly by itself, but when i put it on trpc, the output doesn't How to create a React Component that fetch API based on a router from props ?I want to pass in my React component props the name of the router to use, here is my current implemeHow to pass through authentication header when using createTRPCProxyClient and RSC?Hi - we are having a great time with tRPC, and have it working well in a Next14 + React Server CompoIntegrating tRPC with Clerk Authentication in an Existing Next.js "Turborepo" ProjectHello, I am currently working on a Next.js application within a Turborepo setup and am looking to inHelp understanding how to deploy tRPC in monorepo.Hi All, I read in the FAQ that most benefits come from using tRPC in a monorepo. So if i want to buibest way to delete trpc?I want to delete TRPC from a Nextjs project. What is the most appropiate way to take it out? ThanksQuery string paramsHi , new to tRPC, is there a way to send query string params with tRPC when making a request ?Error running dist/client/index.jsGot this error during node dist/client/index.js I have ran tsc -b also followed as same as in docs