noynek2242 Posts - Answer Overflow

noynek2242

Explore posts from servers

•Created by noynek2242 on 3/8/2024 in #questions

Decimal Warning

I'm trying to figure out this error:

Warning: Only plain objects can be passed to Client Components from Server Components. Decimal objects are not supported.

I have some prisma decimals so I tried some of the fixes to the superjson transformer using Decimal.js, but it didn't make the warnings go away. I haven't run into an actual problem yet though so I'm confused. Any suggestions? thanks

3 replies

TTCTheo's Typesafe Cult

•Created by noynek2242 on 2/24/2024 in #questions

Sharing Logic Across TRPC Procedures

I've got multiple procedures that need to share logic. For example, I've got a query and a mutation that both return a lastUpdatedBy field. Instead of returning the user id, I return their name. Technically, I've been able to write the code within both the query and mutation, but I'm struggling to find a way to share that logic. The main issue is really a Typescript one where I can't figure out how to

  getSomething: protectedProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      let something = await ctx.db.somethings.findUnique({
        where: {
          id: parseInt(input.id),
        },
      });

      // here's where I want to write some shared logic
      something = await processSomething({ something, db: ctx.db });

  getSomething: protectedProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      let something = await ctx.db.somethings.findUnique({
        where: {
          id: parseInt(input.id),
        },
      });

      // here's where I want to write some shared logic
      something = await processSomething({ something, db: ctx.db });

The challenge I'm stuck on is figuring out the types in my util. I was able to get the prisma types, but not the something types.

type Props = {
  db: PrismaClient<Prisma.PrismaClientOptions, never, DefaultArgs>;
  something: ???
}
function processSomething({something, db}: Props) {}

type Props = {
  db: PrismaClient<Prisma.PrismaClientOptions, never, DefaultArgs>;
  something: ???
}
function processSomething({something, db}: Props) {}

I've tried this approach https://trpc.io/docs/client/vanilla/infer-types with something like

type RouterOutput = inferRouterOutputs<AppRouter>;
type Home = RouterOutput["something"]["getSomething"];

type RouterOutput = inferRouterOutputs<AppRouter>;
type Home = RouterOutput["something"]["getSomething"];

But that produces an error

'something' is referenced directly or indirectly in its own type annotation.

Any suggestions? thanks!

3 replies

TTCTheo's Typesafe Cult

•Created by noynek2242 on 2/21/2024 in #questions

Client/Server Mutations

Hey, I'm trying to wrap my head around client vs server components in my app. Here's the basic structure I'm using:

{DetailsView}
  - type = server
  - grabs data from various sources 
    {DetailsViewForm}
        - type = client
        - Receives data as props from parent server component
        - User React Hook Form

{DetailsView}
  - type = server
  - grabs data from various sources 
    {DetailsViewForm}
        - type = client
        - Receives data as props from parent server component
        - User React Hook Form

This approach works well for returning the data in a clean and fast way while allowing for interactivity in the form. Where I'm getting lost is how to submit the form. I can submit it client side with the useMutate hook, but then I'm not sure how to fetch new data. It seems more ideal to use the server mutate function instead, but I can't figure out how to call that from a client component. I can make this all work with client components, but it seems like the direction of the App router in Next.js is to move toward server components. Thanks

7 replies

Gaming

Programming