TRPC (SSG)+ SSR + Middleware

JJames Perkins Bit more context to save some time: ```tsx import { withClerkMiddleware } from ...

J

julius•3/8/23, 8:22 PM

hmm im not sure what you mean here really. i just tried ssg-ing a page when using middleware and they worked fine

J

julius•3/8/23, 8:24 PM

JJames Perkins Don't worry I came with an example. Here is Clerk with TRPC + Middleware with T...

J

julius•3/8/23, 8:24 PM

ill take a look

J

julius•3/8/23, 8:25 PM

the page is ssr'ed through ssg

J

julius•3/8/23, 8:25 PM

J

julius•3/8/23, 8:26 PM

the getAuth is coming from clerk?

J

julius•3/8/23, 8:28 PM

can you push the example to a branch on that repo?

J

julius•3/8/23, 8:28 PM

or is the middleware + ssg all you've added?

J

julius•3/8/23, 8:29 PM

setting up clerk. (sorry never used it)

J

julius•3/8/23, 8:31 PM

ok that was quick

J

julius•3/8/23, 8:31 PM

good first impression

J

julius•3/8/23, 8:32 PM

what page you adding the ssg stuff to?

J

julius•3/8/23, 8:33 PM

yea just so we're trying the same thing

J

julius•3/8/23, 8:36 PM

eerhm i dont

J

julius•3/8/23, 8:36 PM

https://cln.sh/F4xVfjlV

CleanShot 2023-03-08 at 21.36.12

Video uploaded to CleanShot Cloud

J

julius•3/8/23, 8:38 PM

this is what i did on the protected page:

J

julius•3/8/23, 8:38 PM

import { UserButton } from "@clerk/nextjs";
import { getAuth } from "@clerk/nextjs/server";
import { GetServerSidePropsContext, type NextPage } from "next";
import { createInnerTRPCContext } from "../server/api/trpc";
import { createProxySSGHelpers } from "@trpc/react-query/ssg";
import { appRouter } from "../server/api/root";
import SuperJSON from "superjson";
import { api } from "../utils/api";

export const getServerSideProps = async ({
  req,
}: GetServerSidePropsContext) => {
  const auth = getAuth(req); // Error here

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: createInnerTRPCContext({ auth }),
    transformer: SuperJSON,
  });

  await ssg.example.hello.prefetch({ text: "from Clerk" });

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

const Protected: NextPage = () => {
  const hello = api.example.hello.useQuery({ text: "from Clerk" });

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
        <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
          Welcome to the{" "}
          <span className="text-[hsl(280,100%,70%)]">Protected</span> Page
        </h1>
        <p className="text-2xl text-white">Click this User Button!</p>
        <UserButton afterSignOutUrl="/" />
        <p className="text-2xl text-white">
          {hello.data ? hello.data.greeting : "Loading tRPC query..."}
        </p>
      </div>
    </main>
  );
};

export default Protected;

import { UserButton } from "@clerk/nextjs";
import { getAuth } from "@clerk/nextjs/server";
import { GetServerSidePropsContext, type NextPage } from "next";
import { createInnerTRPCContext } from "../server/api/trpc";
import { createProxySSGHelpers } from "@trpc/react-query/ssg";
import { appRouter } from "../server/api/root";
import SuperJSON from "superjson";
import { api } from "../utils/api";

export const getServerSideProps = async ({
  req,
}: GetServerSidePropsContext) => {
  const auth = getAuth(req); // Error here

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: createInnerTRPCContext({ auth }),
    transformer: SuperJSON,
  });

  await ssg.example.hello.prefetch({ text: "from Clerk" });

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

const Protected: NextPage = () => {
  const hello = api.example.hello.useQuery({ text: "from Clerk" });

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
        <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
          Welcome to the{" "}
          <span className="text-[hsl(280,100%,70%)]">Protected</span> Page
        </h1>
        <p className="text-2xl text-white">Click this User Button!</p>
        <UserButton afterSignOutUrl="/" />
        <p className="text-2xl text-white">
          {hello.data ? hello.data.greeting : "Loading tRPC query..."}
        </p>
      </div>
    </main>
  );
};

export default Protected;

import { UserButton } from "@clerk/nextjs";
import { getAuth } from "@clerk/nextjs/server";
import { GetServerSidePropsContext, type NextPage } from "next";
import { createInnerTRPCContext } from "../server/api/trpc";
import { createProxySSGHelpers } from "@trpc/react-query/ssg";
import { appRouter } from "../server/api/root";
import SuperJSON from "superjson";
import { api } from "../utils/api";

export const getServerSideProps = async ({
  req,
}: GetServerSidePropsContext) => {
  const auth = getAuth(req); // Error here

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: createInnerTRPCContext({ auth }),
    transformer: SuperJSON,
  });

  await ssg.example.hello.prefetch({ text: "from Clerk" });

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

const Protected: NextPage = () => {
  const hello = api.example.hello.useQuery({ text: "from Clerk" });

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
        <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
          Welcome to the{" "}
          <span className="text-[hsl(280,100%,70%)]">Protected</span> Page
        </h1>
        <p className="text-2xl text-white">Click this User Button!</p>
        <UserButton afterSignOutUrl="/" />
        <p className="text-2xl text-white">
          {hello.data ? hello.data.greeting : "Loading tRPC query..."}
        </p>
      </div>
    </main>
  );
};

export default Protected;

import { UserButton } from "@clerk/nextjs";
import { getAuth } from "@clerk/nextjs/server";
import { GetServerSidePropsContext, type NextPage } from "next";
import { createInnerTRPCContext } from "../server/api/trpc";
import { createProxySSGHelpers } from "@trpc/react-query/ssg";
import { appRouter } from "../server/api/root";
import SuperJSON from "superjson";
import { api } from "../utils/api";

export const getServerSideProps = async ({
  req,
}: GetServerSidePropsContext) => {
  const auth = getAuth(req); // Error here

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: createInnerTRPCContext({ auth }),
    transformer: SuperJSON,
  });

  await ssg.example.hello.prefetch({ text: "from Clerk" });

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

const Protected: NextPage = () => {
  const hello = api.example.hello.useQuery({ text: "from Clerk" });

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
        <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
          Welcome to the{" "}
          <span className="text-[hsl(280,100%,70%)]">Protected</span> Page
        </h1>
        <p className="text-2xl text-white">Click this User Button!</p>
        <UserButton afterSignOutUrl="/" />
        <p className="text-2xl text-white">
          {hello.data ? hello.data.greeting : "Loading tRPC query..."}
        </p>
      </div>
    </main>
  );
};

export default Protected;

JJames Perkins I spent like all last week on this 😆

J

julius•3/8/23, 8:39 PM

did you make an error? or is it still erroring for you?

J

julius•3/8/23, 8:39 PM

oh no

J

julius•3/8/23, 8:40 PM

no problem

JJames Perkins It was reported by a user and then my whole weekend was consumed by me trying to...

A

Alex / KATT 🐱•3/8/23, 8:45 PM

Did they at least give you their repo? Haha

A

Alex / KATT 🐱•3/8/23, 8:45 PM

Life's too short to solve issues without reproduction lol

J

julius•3/8/23, 8:47 PM

It was smooth ngl