jack Posts - tRPC

jack

•Created by jack on 10/24/2023 in #❓-help

error route always getting 500 from trpc error? (next13/approuter)

I've got this condition for throwing in my trpc procedure:

      if (!userClerkProfile) {
        console.log("throwing"); // -> this is logging 
        throw new TRPCError({
          code: "NOT_FOUND",
          message: `Couldn't find the user with @${input.username}`,
        });

      if (!userClerkProfile) {
        console.log("throwing"); // -> this is logging 
        throw new TRPCError({
          code: "NOT_FOUND",
          message: `Couldn't find the user with @${input.username}`,
        });

and on client I have a next13 error.tsx route, in which I do:

const ErrorViewMap = {
  [TRPC_ERROR_MAP.NOT_FOUND]: UsernameNotFoundErrorView,
  DEFAULT: () => <p>Unexpected error, please try again</p>,
};

export default function ProfilePageError({
  error,
  reset,
}: PropsProfilePageError) {
  const errorCode = getHTTPStatusCodeFromError(error);
  const ErrorView = ErrorViewMap[errorCode] ?? ErrorViewMap.DEFAULT;

  return <ErrorView message={"stock message"} resetFn={reset} />;
}

const ErrorViewMap = {
  [TRPC_ERROR_MAP.NOT_FOUND]: UsernameNotFoundErrorView,
  DEFAULT: () => <p>Unexpected error, please try again</p>,
};

export default function ProfilePageError({
  error,
  reset,
}: PropsProfilePageError) {
  const errorCode = getHTTPStatusCodeFromError(error);
  const ErrorView = ErrorViewMap[errorCode] ?? ErrorViewMap.DEFAULT;

  return <ErrorView message={"stock message"} resetFn={reset} />;
}

errorCode is always 500 when we throw from that condition. No matter the code I pass when I throw

6 replies

TtRPC

•Created by jack on 2/11/2023 in #❓-help

best practices for organizing routes/procedures?

i'm trying to find some practices/styles in which people generally define routes with trpc. currently im just doing a router per data entity, and defining crud operations on there, but there's a lot of caveats that are kind of defined with REST, that i'm unsure of how to handle here. one idea i had was to define my router as such: (assume each subrouter will have routes)

export const selectionRouter = createTRPCRouter({
  // CREATE
  create: createTRPCRouter({}),
  // READ
  read: createTRPCRouter({
    getAllValidSelections: publicProcedure.query(async ({ ctx }) => {...}),
  }),
  // UDPATE
  update: createTRPCRouter({
    editSelections: protectedProcedure.mutation(async ({ ctx, input }) => {...}),
  }),
  // DELETE
  delete: createTRPCRouter({}),
});

export const selectionRouter = createTRPCRouter({
  // CREATE
  create: createTRPCRouter({}),
  // READ
  read: createTRPCRouter({
    getAllValidSelections: publicProcedure.query(async ({ ctx }) => {...}),
  }),
  // UDPATE
  update: createTRPCRouter({
    editSelections: protectedProcedure.mutation(async ({ ctx, input }) => {...}),
  }),
  // DELETE
  delete: createTRPCRouter({}),
});

another thing is reusing logic- i have a getSelectionsById, and a getOwnSelections. of course, these are gonna have a lot overlap because its entirely the same logic, but in one i'm passing conditional ids, and in the other im passing the session id. of course i could extract this out, but it feels inconsistent with the rest of the logic living inside of the router. i'm sure there's no clear cut answer for most of this, but i was just wondering how people generally go about this, or if there are any guides or blogs about this topic.

4 replies

TtRPC

•Created by jack on 2/1/2023 in #❓-help

type mismatch between tRPC return (in sveltekit) and defined type

i've got this piece of code:

read: async () => {
  const res = await trpc($page).getCards.query();

  if (!res) return;

  cards = cards_reducer(cards, {
    type: 'reload',
    payload: { cards: res }
  });
},

read: async () => {
  const res = await trpc($page).getCards.query();

  if (!res) return;

  cards = cards_reducer(cards, {
    type: 'reload',
    payload: { cards: res }
  });
},

the issue is that the type of res, as returned from trpc, is SerializeObject<UndefinedToOptional<Card & { tasks: Task[]; }>>[], while i've type my cards state as (Card & { tasks: Task[]; })[];. as far as i can tell, there should be no mismatch in type here, but the linter isn't happy with trying to pass res as the same type as cards

13 replies