Fitim Bytyqi Posts

Fitim Bytyqi

•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