Fitim Bytyqi
Fitim Bytyqi•6d ago

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.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?