tRPC, Nextjs GetServerSideProps and satisfies error.
Hi guys, for some reason, when i use "satisfies" operator in a Nextjs getServerSideProps, i can't use tRPC SSGHelpers or Prisma Client. I'm getting this error, "ReferenceError: createProxySSGHelpers is not defined" and crash my app. But when i remove satisfies operator, all error are gone and my app is running again. What happen here?
Example:
export const getServerSideProps = (async (ctx) => {
const prisma = new PrismaClient();
return {
props: {},
};
}) satisfies GetServerSideProps;
this crashes in "ReferenceError: PrismaClient is not defined"
25 Replies
you have to import PrismaClient, also if you are using T3 import prisma
why are you creating a new prismaclient in gssp
was an example, i don't create Prisma Client there, but when i use the tRPC SSGHelpers give me the same error.
it was imported, and what about tRPC SSGHelpers, same error when i run the app, not a type error.
You may have a better luck in finding the solution here https://trpc.io/docs/ssg-helpers
SSG Helpers | tRPC
createProxySSGHelpers provides you with a set of helper functions that you can use to prefetch queries on the server.
i already do what docs said, but the problem is with new typescript "satisfies" operator and NextJS GetServerSideProps, that give weirds interactions. Maybe is too early to use it.
I got you now, I had doubts that may be the problem as well, also why are you using trpc inside getServerSideProps
i need to prefetch some queries, just that.
Have you figured this out? @oljimenez I'm also trying to do some prefetch for an ecommerce website but I'm stuck in the
ctx property that goes in the object of createProxySSGHelpersjust dont use
satisfies imo
like in this specific situation
trpc and next have so much typescript generics magic going on behind the scenesdon't use satisfies, and do this instead.
export const getServerSideProps: GetServerSideProps<ReturnPropsType> = async (ctx) => {
...
};
oh, so you didn't use the
ssg from the docs ?yeah, i use it, look an example of
const PageQuery = z.object({
room_id: z.string(),
});
type ReturnProps = z.infer<typeof PageQuery>;
export const getServerSideProps: GetServerSideProps<ReturnProps> = async (
ctx,
) => {
const trpcServer = await trpcServerContext(ctx);
const pageQuery = PageQuery.safeParse(ctx.query);
if (!pageQuery.success) {
return {
redirect: {
permanent: false,
destination: "/dashboard",
},
};
}
await trpcServer.message.getMessagesByRoom.prefetch({
room_id: pageQuery.data.room_id,
});
return {
props: {
trpcState: trpcServer.dehydrate(),
room_id: pageQuery.data.room_id,
},
};
};
this const trpcServer = await trpcServerContext(ctx);
is a wrapper that i did.
export const trpcServerContext = async (ctx: NextServerContext) =>
createProxySSGHelpers({
router: appRouter,
ctx: await createContext({}),
transformer: superjson,
});
oh, the wrapper
I'll try it with it, cuz that's where I'm stuck at 😵
thanks buddy
oh but how are you passing an empty object
createContext? it expects req and res
sry editedwell, maybe is not the best way, but i did this.
type NextServerContext = {
req: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>["req"];
res: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>["res"];
};
export const trpcServerContext = async (ctx: NextServerContext) =>
createProxySSGHelpers({
router: appRouter,
ctx: await createContext({
req: ctx.req as NextApiRequest,
res: ctx.res as NextApiResponse,
}),
transformer: superjson,
});
oh ya
and it works
but maybe exist a better way
yes, the error is gone 😬
it ended up like that, might also make a wrapper in the future like yours
thanks @oljimenez
yeah, the problem is that req and res from context is missing some fields . This is not secure solution i think, because typescript error is gone, but fields are still missing, also maybe you don't need them, example, req is missing body, query and env, but i don't use them in tRPC Context. I did this because i need to move fast in that moment. I will ask in the tRPC discord for a better way.
sure I understand
how can we confirm that the prefetch is done serverside and not client side? If I refresh the page the
isLoading prop from my query returns true and I also see the query in the network request 🤔You can check if the data of the query is already there. If the data start with the value of undefined and then change, is client side, but if start with a value it means it was prefetch. Also if the query was prefetch, shouldn't show you the loading.
yeah, that's what I thought, but sadly I see the
isLoading true at the beginning 😢show me some code
change this dehydratedState: ssg.dehydrate(), for this trpcState: ssg.dehydrate()
huh, that was it!
thanks again 🙏 , hopefully you get the answer from your question in the trpc grp
I've already subscribed there