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