Fitim Bytyqi Posts - Answer Overflow

Fitim Bytyqi

Explore posts from servers

•Created by Fitim Bytyqi on 4/14/2025 in #❓-help

TRPC 11 Classic React Query custom hook

This is how I was able to refactor one of the custom hooks I had before, typescript threw an error ofc. old approach

export const useGlassDiameters = <
  T extends DecoratedQuery<{
    input: DiameterRequestDto;
    output: DiameterResponseDto[];
    transformer: any;
    errorShape: any;
  }>,
  U extends T extends DecoratedQuery<infer R> ? R : never,
>(
  input: U['input'] | SkipToken,
  opts?: UseTRPCQueryOptions<U['output'], any, any>
): UseTRPCQueryResult<U['output'], TRPCClientErrorLike<U>> =>
  trpc.glassesPrescription.getGlassDiameters.useQuery(input, opts);

export const useGlassDiameters = <
  T extends DecoratedQuery<{
    input: DiameterRequestDto;
    output: DiameterResponseDto[];
    transformer: any;
    errorShape: any;
  }>,
  U extends T extends DecoratedQuery<infer R> ? R : never,
>(
  input: U['input'] | SkipToken,
  opts?: UseTRPCQueryOptions<U['output'], any, any>
): UseTRPCQueryResult<U['output'], TRPCClientErrorLike<U>> =>
  trpc.glassesPrescription.getGlassDiameters.useQuery(input, opts);

Refactored approach

  export const useGlassDiameters = (
    input: DiameterRequestDto,
    opts?: UseTRPCQueryOptions<DiameterResponseDto[], any, any>
  ): UseTRPCQueryResult<DiameterResponseDto[], TRPCClientErrorLike<any>> =>
    trpc.glassesPrescription.getGlassDiameters.useQuery(input, opts);

  export const useGlassDiameters = (
    input: DiameterRequestDto,
    opts?: UseTRPCQueryOptions<DiameterResponseDto[], any, any>
  ): UseTRPCQueryResult<DiameterResponseDto[], TRPCClientErrorLike<any>> =>
    trpc.glassesPrescription.getGlassDiameters.useQuery(input, opts);

I would like to know your thoughts if this is the right way.

2 replies

TtRPC

•Created by Fitim Bytyqi on 10/28/2024 in #❓-help

Blob as response

I know this has been mentioned couple of time but does TRPC allow returning a blob on the client from a publicProcedure.

downloadFile: baseProcedure.mutation(async () => {
    const response = await ky("api/export", {
      headers: {
        Authorization: `Bearer ${(await cookies()).get("token")?.value}`,
      },
    }).blob();

    return response;
  }),

downloadFile: baseProcedure.mutation(async () => {
    const response = await ky("api/export", {
      headers: {
        Authorization: `Bearer ${(await cookies()).get("token")?.value}`,
      },
    }).blob();

    return response;
  }),

This works when used with server actions from this blog https://trpc.io/blog/trpc-actions I wanted to ask if that's the case with publicProcedures too.

11 replies

TtRPC

•Created by Fitim Bytyqi on 6/26/2024 in #❓-help

How do I pass FormData from client to the public procedure ?

Whilst being able to pass objects when calling mutate() from react-query's, FormData seems to not work. Logging input from public procedure results to empty object ? Any workaround ?

2 replies

TtRPC

•Created by Fitim Bytyqi on 6/3/2024 in #❓-help

Next 14 app router

Is there any docs for NextJS 14 app router integration ?

22 replies

TTCTheo's Typesafe Cult

•Created by Fitim Bytyqi on 3/11/2024 in #questions

Using Next with an external backend

Hey Theo, I wanted to get your opinion on using next with an external api server knowing that next has its own. In order to take advantage of next app router features do you think its nice using next server as proxy to communicate to those external api servers. And does that mean you will always have 2 round trips back and forth to fetch json data. Im asking this because I know next is built as a full stack framework and not like some framework you would use to communicate with an external server. Thanks for your time.

4 replies

Gaming

Programming