search

t3dotgg / chirp

https://xn--uo8h.t3.gg/
389 stars 60 forks source link

`createProxySSGHelpers` is deprecated in newest versions of tRPC #24

Open thefirebanks opened 1 year ago

thefirebanks commented 1 year ago

Heyhey! I was loving this tutorial until I stumbled upon section "using tRPC's createProxySSGHelpers" and I run into this error 😢 :

Module not found: Can't resolve '@trpc/react-query/ssg'

when trying to use import { createProxySSGHelpers } from "@trpc/react-query/ssg";

I looked it up and it seems like the API changed to createServerSideHelpers: https://trpc.io/docs/nextjs/server-side-helpers

but then I'm unable to make it work with the new format. This is what [slug].tsx would look like:

import type { GetStaticProps, NextPage } from "next";
import Head from "next/head";
import { api } from "~/utils/api";
import { createServerSideHelpers } from "@trpc/react-query/server";
import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db";
import superjson from "superjson";

const ProfilePage: NextPage<{ username: string }> = ({ username }) => {
  const { data } = api.profile.getUserByUsername.useQuery({
    username,
  });

  if (!data) return <div>404</div>;

  console.log(username);

  return (
    <>
      <Head>
        <title>{data.username}</title>
      </Head>

      <main className="flex h-screen justify-center">
        <div>{data.username}</div>
      </main>
    </>
  );
};

export const getStaticProps: GetStaticProps = async (context) => {
  const ssg = createServerSideHelpers({
    router: appRouter,
    ctx: { prisma, userId: null },
    transformer: superjson,
  });

  const slug = context.params?.slug as string;
  if (typeof slug !== "string") throw new Error("no slug");

  const username = slug?.replace("@", "");

  await ssg.profile.getUserByUsername.fetch({ username: username });

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

export const getStaticPaths = () => {
  return { paths: [], fallback: "blocking" };
};
export default ProfilePage;

But then the error I get is:

❌ tRPC failed on profile.getUserByUsername: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "username"
    ],
    "message": "Required"
  }
]

and when trying to log the value of username in the console.log(username); statement I get undefined.

Full code: https://github.com/thefirebanks/twittermoji/blob/main/src/pages/%5Bslug%5D.tsx

w3bdesign commented 1 year ago

@thefirebanks

See https://github.com/t3dotgg/chirp/pull/21