Topics

Theo's Typesafe Cult•2y ago

❌ tRPC failed on profile.getUserByUsername: No "query"-procedure on path "profile.getUserByUsername"

I am a bit lost. This is the profileRouter. export const profileRouter = createTRPCRouter({ getUserByUsername: publicProcedure .input(z.object({ username: z.string() })) .query(async ({ input }) => { const [user] = await clerkClient.users.getUserList({ username: [input.username], }); if (!user) { // if we hit here we need a unsantized username so hit api once more and find the user. const users = ( await clerkClient.users.getUserList({ limit: 200, }) ) const user = users.find((user) => user.externalAccounts.find((account) => account.username === input.username)); if (!user) { throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "User not found", }); } return filterUserForClient(user) } return filterUserForClient(user); }), }); and where it's being called. const ProfilePage: NextPage<{ username: string }> = ({ username }) => { const { data } = api.profile.getUserByUsername.useQuery({ username, }); if (!data) return <div>404</div>;

37 Replies

Liam•2y ago

Did you add the router to the root.ts file?

theturtlechief•2y ago

import { createTRPCRouter } from "npm/server/api/trpc"; import { postsRouter } from "./routers/posts"; import { profileRouter } from "./routers/profile"; /** * This is the primary router for your server. * * All routers added in /api/routers should be manually added here. */ export const appRouter = createTRPCRouter({ posts: postsRouter, profile: profileRouter, }); // export type definition of API export type AppRouter = typeof appRouter; yeah @Lermatroid

Liam•2y ago

That is weird. Any type errors showing in your IDE? (assuming the error in the title is from runtime)

theturtlechief•2y ago

no, Idk in the ssg helper, import { createProxySSGHelpers } from "@trpc/react-query/ssg"; import { appRouter } from "npm/server/api/root"; import { prisma } from "npm/server/db"; import superjson from "superjson"; export const generateSSGHelper = () => createProxySSGHelpers({ router: appRouter, ctx: { prisma, userId: null }, transformer: superjson, // optional - adds superjson serialization }); the creatProxySSGHelper is deprected its fine to switch right to import { createServerSideHelpers } from "@trpc/react-query/server"; import { appRouter } from "npm/server/api/root"; import { prisma } from "npm/server/db"; import superjson from "superjson"; export const generateSSGHelper = () => createServerSideHelpers({ router: appRouter, ctx: { prisma, userId: null }, transformer: superjson, // optional - adds superjson serialization }); @Lermatroid

Liam•2y ago

Not sure then, sorry :/

peterp•2y ago

is the trpc client pointing to the correct place? use 3 ` [backticks] to format your code.

my code dawg

my code dawg

otherwise it's too difficult to follow

theturtlechief•2y ago

import { clerkClient } from "@clerk/nextjs/server";
import { TRPCError } from "@trpc/server";
import { z } from "zod";

import { createTRPCRouter, publicProcedure } from "npm/server/api/trpc";
import { filterUserForClient } from "npm/server/helpers/filterUserForClient";

export const profileRouter = createTRPCRouter({
  getUserByUsername: publicProcedure
    .input(z.object({ username: z.string() }))
    .query(async ({ input }) => {
      const [user] = await clerkClient.users.getUserList({
        username: [input.username],
      });

      if (!user) {
        // if we hit here we need a unsantized username so hit api once more and find the user.
        const users = (
          await clerkClient.users.getUserList({
            limit: 200,
          })
        )
        const user = users.find((user) => user.externalAccounts.find((account) => account.username === input.username));
        if (!user) {
          throw new TRPCError({
            code: "INTERNAL_SERVER_ERROR",
            message: "User not found",
          });
        }
        return filterUserForClient(user)
      }

      return filterUserForClient(user);

    }),
});

import { clerkClient } from "@clerk/nextjs/server";
import { TRPCError } from "@trpc/server";
import { z } from "zod";

import { createTRPCRouter, publicProcedure } from "npm/server/api/trpc";
import { filterUserForClient } from "npm/server/helpers/filterUserForClient";

export const profileRouter = createTRPCRouter({
  getUserByUsername: publicProcedure
    .input(z.object({ username: z.string() }))
    .query(async ({ input }) => {
      const [user] = await clerkClient.users.getUserList({
        username: [input.username],
      });

      if (!user) {
        // if we hit here we need a unsantized username so hit api once more and find the user.
        const users = (
          await clerkClient.users.getUserList({
            limit: 200,
          })
        )
        const user = users.find((user) => user.externalAccounts.find((account) => account.username === input.username));
        if (!user) {
          throw new TRPCError({
            code: "INTERNAL_SERVER_ERROR",
            message: "User not found",
          });
        }
        return filterUserForClient(user)
      }

      return filterUserForClient(user);

    }),
});

profile router

import type { GetStaticProps, NextPage } from "next";
import Head from "next/head";
import { api } from "npm/utils/api";
import { PageLayout } from "npm/components/layout";
import Image from "next/image";
import { LoadingPage } from "npm/components/loading";
import { PostView } from "npm/components/postview";
import { generateSSGHelper } from "npm/server/helpers/ssgHelper";

const ProfileFeed = (props: { userId: string }) => {
  const { data, isLoading } = api.posts.getPostsByUserId.useQuery({
    userId: props.userId,
  });

  if (isLoading) return <LoadingPage />;

  if (!data || data.length === 0) return <div>User has not posted</div>;

  return (
    <div className="flex flex-col">
      {data.map((fullPost) => (
        <PostView {...fullPost} key={fullPost.post.id} />
      ))}
    </div>
  );
};

const ProfilePage: NextPage<{ username: string }> = ({ username }) => {
  const { data } = api.profile.getUserByUsername.useQuery({ username }); //FAILS HERE
  
  if (!data) return <div>404</div>;
  return (
    <>
      char limit on disc
    </>
  );
};

export const getStaticProps: GetStaticProps = async (context) => {
  const ssg = generateSSGHelper();

  const slug = context.params?.slug;

  if (typeof slug !== "string") throw new Error("no slug");

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

  await ssg.profile.getUserByUsername.prefetch({ username });

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

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

export default ProfilePage;

import type { GetStaticProps, NextPage } from "next";
import Head from "next/head";
import { api } from "npm/utils/api";
import { PageLayout } from "npm/components/layout";
import Image from "next/image";
import { LoadingPage } from "npm/components/loading";
import { PostView } from "npm/components/postview";
import { generateSSGHelper } from "npm/server/helpers/ssgHelper";

const ProfileFeed = (props: { userId: string }) => {
  const { data, isLoading } = api.posts.getPostsByUserId.useQuery({
    userId: props.userId,
  });

  if (isLoading) return <LoadingPage />;

  if (!data || data.length === 0) return <div>User has not posted</div>;

  return (
    <div className="flex flex-col">
      {data.map((fullPost) => (
        <PostView {...fullPost} key={fullPost.post.id} />
      ))}
    </div>
  );
};

const ProfilePage: NextPage<{ username: string }> = ({ username }) => {
  const { data } = api.profile.getUserByUsername.useQuery({ username }); //FAILS HERE
  
  if (!data) return <div>404</div>;
  return (
    <>
      char limit on disc
    </>
  );
};

export const getStaticProps: GetStaticProps = async (context) => {
  const ssg = generateSSGHelper();

  const slug = context.params?.slug;

  if (typeof slug !== "string") throw new Error("no slug");

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

  await ssg.profile.getUserByUsername.prefetch({ username });

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

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

export default ProfilePage;

profile page

import { createTRPCRouter } from "npm/server/api/trpc";
import { postsRouter } from "./routers/posts";
import { profileRouter } from "./routers/profile";

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
  posts: postsRouter,
  profile: profileRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

import { createTRPCRouter } from "npm/server/api/trpc";
import { postsRouter } from "./routers/posts";
import { profileRouter } from "./routers/profile";

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
  posts: postsRouter,
  profile: profileRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

Root

import { type CreateNextContextOptions } from "@trpc/server/adapters/next";

import { prisma } from "npm/server/db";

export const createTRPCContext = (opts: CreateNextContextOptions) => {
  const { req } = opts;
  const sesh = getAuth(req);

  const userId = sesh.userId;

  return {
    prisma,
    userId,
  };
};

import { initTRPC, TRPCError } from "@trpc/server";
import superjson from "superjson";
import { getAuth } from "@clerk/nextjs/server";
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,
      },
    };
  },
});

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;

const enforceUserIsAuthed = t.middleware(async ({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({
      code: "UNAUTHORIZED",
    });
  }

  return next({
    ctx: {
      userId: ctx.userId,
    },
  });
});

export const privateProcedure = t.procedure.use(enforceUserIsAuthed);

import { type CreateNextContextOptions } from "@trpc/server/adapters/next";

import { prisma } from "npm/server/db";

export const createTRPCContext = (opts: CreateNextContextOptions) => {
  const { req } = opts;
  const sesh = getAuth(req);

  const userId = sesh.userId;

  return {
    prisma,
    userId,
  };
};

import { initTRPC, TRPCError } from "@trpc/server";
import superjson from "superjson";
import { getAuth } from "@clerk/nextjs/server";
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,
      },
    };
  },
});

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;

const enforceUserIsAuthed = t.middleware(async ({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({
      code: "UNAUTHORIZED",
    });
  }

  return next({
    ctx: {
      userId: ctx.userId,
    },
  });
});

export const privateProcedure = t.procedure.use(enforceUserIsAuthed);

trcp @Lermatroid @peterp

Liam•2y ago

As I said I am not sure, please stop pinging me, thanks!

theturtlechief•2y ago

oh, sorry my bad

Liam•2y ago

All good 👍

theturtlechief•2y ago

still unresolved

abcdef•2y ago

Your code looks correct Can u put it on github

theturtlechief•2y ago

comparing to a cloned version

theturtlechief•2y ago

why is mine crossed out? I think that's the issue @abcdef

abcdef•2y ago

Change it to import { createServerSideHelpers } from "@trpc/react-query/server";

theturtlechief•2y ago

i did try that but why would it run on the cloned version and not mine?

abcdef•2y ago

What do you mean?

theturtlechief•2y ago

like I cloned theo’s version onto my machine and edited the env variables and it runs yet mine (which is the exact same) does not work why would it throw a deprecated error on mine and not on his?

abcdef•2y ago

His repo uses the old trpc version probably createProxySSGHelpers got deprecated on April 6

theturtlechief•2y ago

hm even still though when i make the change it still bugs out i can unprivate my repo and push if you wanna see

abcdef•2y ago

abcdef•2y ago

Sure

theturtlechief•2y ago

https://github.com/W-McPhail/wmcphailWeb/

GitHub

GitHub - W-McPhail/wmcphailWeb

Contribute to W-McPhail/wmcphailWeb development by creating an account on GitHub.

theturtlechief•2y ago

@abcdef

abcdef•2y ago

Ok lemme take a look Ok slight problem, you're not adding profileRouter to appRouter

abcdef•2y ago

abcdef•2y ago

@TheTurtleChief

theturtlechief•2y ago

wait what I swear to god I was

abcdef•2y ago

In the code you sent on discord it was added But not on github

theturtlechief•2y ago

tf?

import { createTRPCRouter } from "npm/server/api/trpc";
import { postsRouter } from "./routers/posts";
import { profileRouter } from "./routers/profile";

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
  posts: postsRouter,
  profile: profileRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

import { createTRPCRouter } from "npm/server/api/trpc";
import { postsRouter } from "./routers/posts";
import { profileRouter } from "./routers/profile";

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
  posts: postsRouter,
  profile: profileRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

this is what I have

abcdef•2y ago

https://github.com/W-McPhail/wmcphailWeb/blob/main/src/server/api/root.ts

GitHub

wmcphailWeb/root.ts at main · W-McPhail/wmcphailWeb

Contribute to W-McPhail/wmcphailWeb development by creating an account on GitHub.

abcdef•2y ago

Oh did you forget to push?

theturtlechief•2y ago

bruh im gonna cry I didnt hit save im so fucking dumb well

abcdef•2y ago

Lmao

theturtlechief•2y ago

at least its over thats 2 days of my life so it goes thank you bro

abcdef•2y ago

You're welcome I've done the same mistake many times before too 😄

theturtlechief•2y ago

any idea how to fix this? https://recordit.co/DMmGFVkRcR the css loads normally and then like snaps back to be broken @abcdef

Theo's Typesafe Cult Join

21KMembers

View on Discord

Want results from more Discord servers?

Add your server