在trpc项目中创建自定义Hook并正确推断返回类型

概述

在使用trpc进行前端开发时，我们经常需要创建自定义Hook来封装常用的查询逻辑。本文将详细介绍如何在trpc v11版本中创建类型安全的自定义Hook，并确保返回类型能够被正确推断。

问题背景

在trpc v10版本中，开发者可以通过相对简单的方式创建自定义Hook并保持类型安全。但随着v11版本的发布，原有的类型推断机制发生了变化，导致许多开发者在尝试封装useQuery时遇到类型问题。

解决方案

通过分析trpc的内部类型系统，我们可以构建一个类型安全的自定义Hook。以下是实现方案：

import type { SkipToken } from "@tanstack/react-query";
import type { TRPCClientErrorLike } from "@trpc/client";
import type {
  UseTRPCQueryOptions,
  UseTRPCQueryResult,
} from "@trpc/react-query/shared";
import type { DecoratedQuery } from "@trpc/react-query/dist/createTRPCReact";

export const useQueryApi = <
  T extends DecoratedQuery<{
    input: any;
    output: any;
    transformer: any;
    errorShape: any;
  }>,
  U extends T extends DecoratedQuery<infer R> ? R : never,
>(
  query: T,
  input: U["input"] | SkipToken,
  opts?: UseTRPCQueryOptions<
    U["output"],
    U["input"],
    TRPCClientErrorLike<U["output"]>,
    U["output"]
  >,
): UseTRPCQueryResult<U["output"], TRPCClientErrorLike<U>> =>
  query.useQuery(input, opts);

实现解析

1. 类型参数定义：

   • T 参数约束为DecoratedQuery类型，表示trpc的查询方法
   • U 参数通过条件类型推断出T的内部类型结构

2. 输入参数：

   • query 参数接收trpc查询方法
   • input 参数可以是查询输入或SkipToken
   • opts 参数是可选的查询选项

3. 返回类型：

   • 返回标准的trpc查询结果类型
   • 包含输出类型和错误类型的正确推断

注意事项

1. 此方案使用了trpc的一些内部类型，虽然目前工作正常，但在未来版本中可能会发生变化
2. 对于生产环境使用，建议将此代码封装在项目内部，以便在trpc升级时能够集中调整
3. 如果需要更严格的安全检查，可以替换any为具体类型

最佳实践

1. 将此类自定义Hook集中管理，便于维护和更新
2. 为自定义Hook添加详细的JSDoc注释，说明其用途和类型约束
3. 在项目升级trpc版本时，优先测试这些自定义Hook的功能

通过这种方案，开发者可以在trpc v11中创建类型安全的自定义Hook，同时保持代码的整洁和可维护性。