nehalist•2y ago

Type of createServerSideHelpers?

I'm currently trying to implement a helper for getServerSideProps to reduce duplication. It's still wip, but I'm encountering a problem I can't figure out:

export async function createServerSideProps(
  ctx: GetServerSidePropsContext,
  callback: (helpers/**: ???? */) => Record<string, any>
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: {
      user: await getServerSession(ctx.req, ctx.res, authOptions),
    },
    transformer: superjson,
  });

  const props = callback(helpers);

  return {
    props,
  };
}

export async function createServerSideProps(
  ctx: GetServerSidePropsContext,
  callback: (helpers/**: ???? */) => Record<string, any>
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: {
      user: await getServerSession(ctx.req, ctx.res, authOptions),
    },
    transformer: superjson,
  });

  const props = callback(helpers);

  return {
    props,
  };
}

What's the type of helpers in the callback?

5 Replies

nehalistOP•2y ago

Figured it out myself:

export async function createServerSideProps(
  ctx: GetServerSidePropsContext,
  callback: (
    helpers: DecoratedProcedureSSGRecord<AppRouter>
  ) => Record<string, any>
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: {
      user: await getServerSession(ctx.req, ctx.res, authOptions),
    },
    transformer: superjson,
  });

  const props = await callback(helpers);

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

export async function createServerSideProps(
  ctx: GetServerSidePropsContext,
  callback: (
    helpers: DecoratedProcedureSSGRecord<AppRouter>
  ) => Record<string, any>
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: {
      user: await getServerSession(ctx.req, ctx.res, authOptions),
    },
    transformer: superjson,
  });

  const props = await callback(helpers);

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

bigshot824•2y ago

Hello bro.. How do you implement this and where did you put the code? I just got an error "PrismaClient is unable to be run in the browser" [next js]

bigshot824•2y ago

this is how I apply. @nehalist

nehalistOP•2y ago

seems like somewhere in your code you're referencing prisma on the client

bigshot824•2y ago

hmMmMm... I'll take a look on that and let you know 👍