prefetchInfinite on getServerSideProps using SSG helpers

I'm trying to implement pagination using infiniteQuery and SSR with trpc: -

 
export const getServerSideProps = async () => {
  const ssg = generateSSGHelper();

  await ssg.posts.getAll.prefetchInfinite({ limit: 4 });

  return {
    props: {
      trpcState: ssg.dehydrate(),
    },
  };
};

 
export const getServerSideProps = async () => {
  const ssg = generateSSGHelper();

  await ssg.posts.getAll.prefetchInfinite({ limit: 4 });

  return {
    props: {
      trpcState: ssg.dehydrate(),
    },
  };
};

export function generateSSGHelper() {

  return createProxySSGHelpers({
    router: appRouter,
    ctx: { prisma, session: null },
    transformer: superjson
  });
}

export function generateSSGHelper() {

  return createProxySSGHelpers({
    router: appRouter,
    ctx: { prisma, session: null },
    transformer: superjson
  });
}

getAll: publicProcedure
    .input(z.object({
      limit: z.number(),
      cursor: z.string().nullish(),
      skip: z.number().optional(),
    }))
    .query(async ({ ctx, input }) => {
      const { limit, skip, cursor } = input;

      const posts = await ctx.prisma.post.findMany({
        take: limit + 1,
        skip: skip,
        cursor: cursor ? { id: cursor } : undefined,
        orderBy: {
          createdAt: "desc"
        },
      });

      let nextCursor: typeof cursor | undefined = undefined;
      if (posts.length > limit) {
        const nextItem = posts.pop();
        nextCursor = nextItem?.id;
      }

      return {
        posts,
        nextCursor
      };
    }),

getAll: publicProcedure
    .input(z.object({
      limit: z.number(),
      cursor: z.string().nullish(),
      skip: z.number().optional(),
    }))
    .query(async ({ ctx, input }) => {
      const { limit, skip, cursor } = input;

      const posts = await ctx.prisma.post.findMany({
        take: limit + 1,
        skip: skip,
        cursor: cursor ? { id: cursor } : undefined,
        orderBy: {
          createdAt: "desc"
        },
      });

      let nextCursor: typeof cursor | undefined = undefined;
      if (posts.length > limit) {
        const nextItem = posts.pop();
        nextCursor = nextItem?.id;
      }

      return {
        posts,
        nextCursor
      };
    }),

getting the error in the picture, I followed christopher ehrlich's video

1 Reply

mrmcgri•2y ago

I have same code as you, more or less. It works. The error complains about you having issues in your env setup. Anyway, in case it help my code: export async function getServerSideProps() { const helpers = createServerSideHelpers({ router: appRouter, ctx: { prisma } as any, transformer: superjson, // optional - adds superjson serialization }); const initialData = await helpers.discovery.getFollowingRecipes.prefetchInfinite({ limit: 20, cursor: 6 }); return { // Passed to the page component as props props: { trpcState: helpers.dehydrate(), }, revalidate: 60, };

Gaming

Programming

prefetchInfinite on getServerSideProps using SSG helpers