I was following the video and coding it on my side and at about 1:50:00 (Routing section for profile and post views), i noticed that the loader was still there after a few seconds/minutes.
I then noticed that posts weren't fetched anymore.
When i console.log(api.posts.getAll.useQuery()), the request seems to be paused instantly. ({..., isFetching: false, ..., isPaused: true})
I really don't know what's going on, i tried several things such as recreating the database or removing some codes to where it was working fine, i restarted the server and everything but nothing work.
The database seems ok, i can see my records in prisma studio, and i don't see anything special in clerk.
The only thing i did which might have cause bugs was to close my laptop with everything opened and then reopened it the next morning.
Do you have any idea of what can cause that ?

I tried forward with Clerk but when I added log out flow no query in trpc worked. I tried to add a public route in clerk middleware, but not worked too.

Could you please make another tutorial like this with the t3 stack but using the now stable app router

When @t3dotgg added the username to the posts, I followed along but I would get null values for usernames. As a replacement, I used a portion of the author.id string and kept the author.username in there to fix later.
I can no longer sweep this issue under the rug and need to fix it. Any suggestions would be appreciated. I am using github login, btw.
Here's how the username looks for me right now and the code is shown below.

const PostView = (props: PostWithUser) => {
  const { post, author } = props;
  //const displayname = `@user..${author.id.slice(-5)}.${author.username}`;
  return (
    <div key={post.id} className="flex border-b border-slate-400 p-8">
      <Image
        src={author.profileImageUrl}
        className="h-14 w-14 rounded-full"
        //alt={`${displayname}'s profile picture`}
        alt="profile picture"
        width={56}
        height={56}
      />
      <div className="flex flex-col">
        <div className="flex gap-1 font-bold text-slate-300">
          <span>{`@user..${author.id.slice(-5)}.${author.username}`}</span>
          <span className="font-thin">{`· ${dayjs(
            post.createdAt
          ).fromNow()}`}</span>
        </div>
        <span className="text-2xl">{post.content}</span>
      </div>
    </div>
  );
};

A bit more details:

I am getting this wired error on profile page not getting any clues.

node: internal/errors:490
ErrorCaptureStackTrace(err);
^

TypeError [ERR_INVALID_ARG_TYPE]: The "code" argument must be of type number. Received type string ('SIGTERM')
at process.set [as exitCode] (node:internal/bootstrap/node:124:9)
at process.exit (node:internal/process/per_thread:188:24)
at process. (/Users/Documents/code/p/demo-web-app/node_modules/.pnpm/@prisma[email protected][email protected]/node_modules/@prisma/client/runtime/library.js:99:2170)
at Object.onceWrapper (node:events:626:26)
at process.emit (node:events:511:28) {
code: 'ERR_INVALID_ARG_TYPE'
}

Node.js v20.1.0

I have been following this guide and TRPCError red line is not going away and when I try to deploy it is never succussing because of the following statement.

everything seems to be working fine, its only this error handling part its not making sense to me nor to the deployment system.
Am I missing out something here, is TRPCError replaced by RTCError ???

z.string().emoji() does not throw an error when a number is passed instead of emojis

Description

When using the z.string().emoji() method, it is expected to throw an error if a non-emoji string is passed as an argument. However, it appears that the method does not throw an error when a number is passed instead of emojis.

When follwing the youtube tutorial, I get the following message as soon as I add the getAuth in the trcp.ts:

tRPC failed on : You need to use "withClerkMiddleware" in your Next.js middleware file. You also need to make sure that your middleware matcher is configured correctly and matches this route or page. See https://clerk.com/docs/quickstarts/get-started-with-nextjs

I think I did everything like mentioned, also I compared the middleware.ts and the trcp.ts with the ones in this repository. Do you/any of you know what could have gone wrong here?

Here's the link to my repo: https://github.com/27leaves/chirp/

Thank you!

SignInButton doesn't seem and I got these errors when I inspected

1. Uncaught (in promise) Clerk: Failed to load Clerk
2. Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID

The new chirp is not shown on the screen, the query is executed as it appears in network but not updated on screen.

import { initTRPC, TRPCError } from "@trpc/server";
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { prisma } from "@/lib/prisma";

export const createTRPCContext = (opts: CreateNextContextOptions) => {
  return {
    prisma,
  };
};

/**
 * 2. INITIALIZATION
 *
 * This is where the tRPC API is initialized, connecting the context and transformer.
 */
import superjson from "superjson";
import { ZodError } from "zod";

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

/**
 * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
 *
 * These are the pieces you use to build your tRPC API. You should import these a lot in the
 * "/src/server/api/routers" directory.
 */

/**
 * This is how you create new routers and sub-routers in your tRPC API.
 *
 * @see https://trpc.io/docs/router
 */
export const createTRPCRouter = t.router;

/**
 * Public (unauthenticated) procedure
 *
 * This is the base piece you use to build new queries and mutations on your tRPC API. It does not
 * guarantee that a user querying is authorized, but you can still access user session data if they
 * are logged in.
 */
export const publicProcedure = t.procedure;

Getting this error

[
    {
        "error": {
            "json": {
                "message": "[\n  {\n    \"code\": \"invalid_type\",\n    \"expected\": \"object\",\n    \"received\": \"undefined\",\n    \"path\": [],\n    \"message\": \"Required\"\n  }\n]",
                "code": -32600,
                "data": {
                    "code": "BAD_REQUEST",
                    "httpStatus": 400,
                    "stack": "",
                    "path": "createUser",
                    "zodError": {
                        "formErrors": [
                            "Required"
                        ],
                        "fieldErrors": {}
                    }
                }
            }
        }
    }
]

I am adding tRpc to my existing app so didn't use create-t3
Any idea why?

Tested
if I remove transformer: superjson, prisma works
also tested using the same zod and superjson version as this repo, but no success

thanks for the tutorial! I'm about 20 mins in. (just set up the posts router) and am getting this error now:

error - Error [TypeError]: Class extends value undefined is not a constructor or null
    at ../../node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/file.js (evalmachine.<anonymous>:5724:19)
    at __require (evalmachine.<anonymous>:14:50)
    at ../../node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/formdata.js (evalmachine.<anonymous>:5881:49)
    at __require (evalmachine.<anonymous>:14:50)
    at ../../node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/body.js (evalmachine.<anonymous>:6094:35)
    at __require (evalmachine.<anonymous>:14:50)
    at ../../node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/response.js (evalmachine.<anonymous>:6510:49)
    at __require (evalmachine.<anonymous>:14:50)
    at <unknown> (evalmachine.<anonymous>:11635:30)
    at requireFn (file:///Users/jaredd/Desktop/repos/twitterclone/node_modules/next/dist/compiled/edge-runtime/index.js:1:7079) {
  middleware: true
}

after inspecting network, i see i am getting 500 on posts.getAll:

https://github.com/t3dotgg/chirp/blob/main/src/pages/index.tsx#L90

The list of posts is shown 4 times 👀

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

I suggest looking into EmojiURLifier.

(Already sent via DM but figured I'd post here publicly for historical purposes.)