vpjm Posts - tRPC

vpjm

•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

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