vpjm
vpjm
Explore posts from servers
TtRPCPPrismaTTCTheo's Typesafe Cult
PostsComments
PPrisma
Created by vpjm on 4/25/2025 in #help-and-questions
Dmmf in frontend
Hi, I need to determine whether a database field is an array. To achieve this, I’ve created a function that uses Prisma's DMMF. Additionally, I want to associate multilingual labels with each field in the database. For this, I’ve defined a typed object that maps each field to its translated labels. These two pieces of information — whether a field is an array and its translations — need to be accessible from the frontend. What would be the best way to structure and expose this data to the client ? Thanks a lot for your help!
6 replies
TtRPC
Created by vpjm on 4/23/2025 in #❓-help
Calling endpoint within another endpoint
Hi, I need to get the result of one of my endpoints, but I can't just call the underlying function directly — because every endpoint is wrapped with security and middleware before being exposed through the tRPC appRouter. So instead of bypassing those layers, I need to trigger the full chain — essentially making a proper call to the endpoint itself (as if it were external), even from inside another tRPC procedure. What's the recommended way to do this?
3 replies
TTCTheo's Typesafe Cult
Created by vpjm on 4/16/2025 in #questions
Re-Design React Compoent
Hi, I had a really hard time trying to type React components that accept other components as parameters. For example, a component that takes Header, Body, and Footer along with their respective props. Handling just one is manageable, but things get much trickier when a parent component takes several of these kinds of components because it then becomes responsible for merging all the parameters of its children, and the types become very large with lots of generics. In addition, it quickly becomes a type inference nightmare, especially when trying to ensure type safety while keeping things flexible. Managing deeply nested component compositions without losing type information is frustrating. Is there a clean way to type such a setup in TypeScript. Example : 
type ComponentEntry<T> = {
  Component: React.FC<T>;
  props: T;
};

export type ParentComponentProps<HeaderProps , BodyProps , FooterProps , OtherProps > = 
  ([HeaderProps] extends [never] ? {} : { header: ComponentEntry<HeaderProps> }) &
  ([BodyProps] extends [never] ? {} : { body: ComponentEntry<BodyProps> }) &
  ([FooterProps] extends [never] ? {} : { footer: ComponentEntry<FooterProps> }) &
  ([OtherProps] extends [never] ? {} : { other: ComponentEntry<OtherProps> });
type ComponentEntry<T> = {
  Component: React.FC<T>;
  props: T;
};

export type ParentComponentProps<HeaderProps , BodyProps , FooterProps , OtherProps > = 
  ([HeaderProps] extends [never] ? {} : { header: ComponentEntry<HeaderProps> }) &
  ([BodyProps] extends [never] ? {} : { body: ComponentEntry<BodyProps> }) &
  ([FooterProps] extends [never] ? {} : { footer: ComponentEntry<FooterProps> }) &
  ([OtherProps] extends [never] ? {} : { other: ComponentEntry<OtherProps> });
Before trying this pattern, I had already experimented with several other approaches: 1 - At first, I was passing pre-initialized components, so there was no need to pass props explicitly. However, I later needed to create a component that depends on its parent’s props (e.g., <header.Header {...header.props, parentHeader.props} />). 2- Another interesting pattern is using {(parentProps) => children(parentProps)}, but I find it just as complex as the current approach (see the TypeScript example above) Thanks !!
3 replies
TtRPC
Created by vpjm on 3/11/2025 in #❓-help
FormData TRPCClientError
Hi i have this error in my client : 
createFormControl.ts:1217 Uncaught (in promise) TRPCClientError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "url"
    ],
    "message": "Required"
  },
  {
    "code": "custom",
    "message": "Input not instance of File",
    "fatal": true,
    "path": [
      "file"
    ]
  }
]
    at TRPCClientError.from (TRPCClientError.mjs:48:20)
    at httpBatchStreamLink.mjs:118:56
createFormControl.ts:1217 Uncaught (in promise) TRPCClientError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "url"
    ],
    "message": "Required"
  },
  {
    "code": "custom",
    "message": "Input not instance of File",
    "fatal": true,
    "path": [
      "file"
    ]
  }
]
    at TRPCClientError.from (TRPCClientError.mjs:48:20)
    at httpBatchStreamLink.mjs:118:56
I am working with Next 15.2.2 and tRPC 11.0.0-rc.682. NO MATTER what I try, FormData cannot be sent to my server — this is very frustrating. If anybody has encountered this problem, please help me! I have a smaller project with the exact same uploading form, and it works fine there (even with latest next version) . I don’t know how to debug this — I’ve spent hours and haven’t found any major differences between the codebases. //DATA TRANSFORMER src: https://github.com/juliangra/trpc-next-formdata-app-router 
interface DataTransformer {
  serialize: (object: any) => any
  deserialize: (object: any) => any
}

export class FormDataTransformer implements DataTransformer {
  serialize(object: any) {
    if (!(object instanceof FormData)) {
      throw new Error('Expected FormData')
    }

    return object
  }

  deserialize(object: any) {
    return object as JSON
  }
}
interface DataTransformer {
  serialize: (object: any) => any
  deserialize: (object: any) => any
}

export class FormDataTransformer implements DataTransformer {
  serialize(object: any) {
    if (!(object instanceof FormData)) {
      throw new Error('Expected FormData')
    }

    return object
  }

  deserialize(object: any) {
    return object as JSON
  }
}
14 replies
TtRPC
Created by vpjm on 3/11/2025 in #❓-help
Private chat with TRPC
Hi I'm relatively new to tRPC and I'm currently trying to implement private chat rooms (1:1 conversations or small groups). I’ve checked out the tRPC SSE chat example https://github.com/trpc/examples-next-sse-chat, but it seems to be designed more for public chat rooms. Could someone please point me in the right direction or share some tips on how to structure private conversations using tRPC ? ( atm, I manually check for each operation whether the user is part of the room, but I don't find this approach very intuitive. ) Thanks a lot in advance! Maybe it's related to this https://github.com/trpc/trpc/issues/3955, but I'm not sure. version : v11
3 replies
PPrisma
Created by vpjm on 2/16/2025 in #help-and-questions
Seeding database with pnpm
I followed this tutorial and I'm using SQLite, but now when I run my Next.js app (pnpm run dev), a dev.db file is created, but it's not seeded. I assume it's normal for a new database to be created for each app, but how can I make sure it's seeded ?
6 replies
TTCTheo's Typesafe Cult
Created by vpjm on 2/11/2025 in #questions
Passing generic inside tRPC query
Hi, I hope you're doing well. Server: 
findManyUser: publicProcedure.input(UserFindManyArgsSchema).
    query(<I extends Prisma.UserFindManyArgs<DefaultArgs>>({ input }: { input: I }) => {
      return prisma.user.findMany(input)
    })
findManyUser: publicProcedure.input(UserFindManyArgsSchema).
    query(<I extends Prisma.UserFindManyArgs<DefaultArgs>>({ input }: { input: I }) => {
      return prisma.user.findMany(input)
    })
Nextjs front: 
const users = trpc.findManyUser.useQuery({include:{image:true}  })
//users : UseTRPCQueryResult<PrismaResultForFindMany<DefaultArgs>, TRPCClientErrorLike<{ input: Prisma.UserFindManyArgs<DefaultArgs>; output: PrismaResultForFindMany<DefaultArgs>; transformer: true;errorShape: DefaultErrorShape;}>>
const users = trpc.findManyUser.useQuery({include:{image:true}  })
//users : UseTRPCQueryResult<PrismaResultForFindMany<DefaultArgs>, TRPCClientErrorLike<{ input: Prisma.UserFindManyArgs<DefaultArgs>; output: PrismaResultForFindMany<DefaultArgs>; transformer: true;errorShape: DefaultErrorShape;}>>
I would like to pass the type of my Prisma query ({ include: { image: true } }) to findManyUser, so users has the expected type and not the default type provided by Prisma (without generics : DefaultArgs ). Thanks for your help. Have a great day/night!
8 replies
TtRPC
Created by vpjm on 2/10/2025 in #❓-help
Passing generic inside tRPC query
Hi, I hope you're doing well. Server: 
findManyUser: publicProcedure.input(UserFindManyArgsSchema).
    query(<I extends Prisma.UserFindManyArgs<DefaultArgs>>({ input }: { input: I }) => {
      return prisma.user.findMany(input)
    })
findManyUser: publicProcedure.input(UserFindManyArgsSchema).
    query(<I extends Prisma.UserFindManyArgs<DefaultArgs>>({ input }: { input: I }) => {
      return prisma.user.findMany(input)
    })
Nextjs front: 
const users = trpc.findManyUser.useQuery({include:{image:true}  })
//users : UseTRPCQueryResult<PrismaResultForFindMany<DefaultArgs>, TRPCClientErrorLike<{ input: Prisma.UserFindManyArgs<DefaultArgs>; output: PrismaResultForFindMany<DefaultArgs>; transformer: true;errorShape: DefaultErrorShape;}>>
const users = trpc.findManyUser.useQuery({include:{image:true}  })
//users : UseTRPCQueryResult<PrismaResultForFindMany<DefaultArgs>, TRPCClientErrorLike<{ input: Prisma.UserFindManyArgs<DefaultArgs>; output: PrismaResultForFindMany<DefaultArgs>; transformer: true;errorShape: DefaultErrorShape;}>>
I would like to pass the type of my Prisma query ({ include: { image: true } }) to findManyUser, so users has the expected type and not the default type provided by Prisma (without generics : DefaultArgs ). Thanks for your help. Have a great day/night!
6 replies
PPrisma
Created by vpjm on 1/31/2025 in #help-and-questions
Enum with custom value
Hi, does anyone know if it's possible to do this in Prisma : 
CREATE TYPE "FileType" AS ENUM ('image/jpeg', 'image/png');
CREATE TYPE "FileType" AS ENUM ('image/jpeg', 'image/png');
Because I can't find a way to specify the enum values like this: 
enum FileType {
  IMAGE_JPEG = "image/jpeg",
  IMAGE_PNG = "image/png"
}
enum FileType {
  IMAGE_JPEG = "image/jpeg",
  IMAGE_PNG = "image/png"
}
4 replies
PPrisma
Created by vpjm on 1/30/2025 in #help-and-questions
Generating a default form from Prisma
Hi, for now, I plan to use Prisma's Zod generator and then convert the Zod schema into a form using react-formgen. I’m not sure if there’s a more canonical and reliable way to do this. If anyone has encountered this issue before, feel free to share your insights!
6 replies
PPrisma
Created by vpjm on 1/3/2025 in #help-and-questions
prisma generate --sql and seeding
Hi, How can I use raw SQL to seed my database in Prisma? I would like to use the new SQL feature, but it seems to not work well with nested folders. ( prisma > sql > [version] > seed > [file].sql ) Also, I tried to read the content of SQL files, but I don't know why, when they are read, they aren't syntactically correct anymore to be called in executeRawUnsafe.
10 replies