tRPCttRPC
Powered by
Fitim BytyqiF
tRPC•10mo ago•
1 reply
Fitim Bytyqi

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.
tRPCJoin
Move Fast & Break Nothing. End-to-end typesafe APIs made easy.
5,015Members
Resources
Recent Announcements

Similar Threads

Was this page helpful?

Similar Threads

tRPC + react query subscriptions
fynnFfynn / ❓-help
2mo ago
trpc/react-query batching
KimblisKKimblis / ❓-help
3y ago
tRPC + React Query Data Invalidation?
rhh4x0RRrhh4x0R / ❓-help
2y ago