Wrap useQuery of tRPC in a custom hook with correct TypeScript types

If you are using tRPC, a TypeScript-first framework for building scalable APIs, you might have come across the need to wrap the useQuery function in a custom hook with correct TypeScript types. In this blog post, we will explore different solutions to achieve this.

Solution 1: Using a generic type parameter

One way to wrap useQuery in a custom hook with correct TypeScript types is by using a generic type parameter. This allows us to specify the expected response type of the query.

  import { useQuery } from 'trpc/client';
  
  function useCustomQuery(queryKey: string) {
    const result = useQuery(queryKey);
    // Additional custom logic here
    return result;
  }
  

In the above code snippet, we define a custom hook called useCustomQuery that takes a queryKey parameter and returns the result of the useQuery function with the specified generic type parameter T. This ensures that the response type of the query matches the expected type.

Solution 2: Using TypeScript type inference

Another way to wrap useQuery in a custom hook with correct TypeScript types is by leveraging TypeScript’s type inference capabilities. We can infer the response type of the query based on the query key.

  import { useQuery } from 'trpc/client';
  
  function useCustomQuery(queryKey: string) {
    const result = useQuery(queryKey) as useQuery.InferQueryResult;
    // Additional custom logic here
    return result;
  }
  

In the above code snippet, we define the useCustomQuery hook without specifying a generic type parameter. Instead, we use the InferQueryResult utility provided by useQuery to infer the response type based on the query key. This ensures that the response type is correctly inferred and matched with the expected type.

Conclusion

Wrapping useQuery in a custom hook with correct TypeScript types is essential for maintaining type safety and improving code readability. In this blog post, we explored two solutions to achieve this – using a generic type parameter and leveraging TypeScript’s type inference capabilities. Choose the solution that best fits your use case and enjoy the benefits of TypeScript’s strong typing in your tRPC queries.

Happy coding!