如何使用 RTK 查询和打字稿使查询挂钩 return 类型取决于参数类型？

Question

我正在为 UI 开发使用 React 制作一个程序。该程序旨在访问文件系统以进行设置，因此我运行节点中的一些服务器代码并使用 RTK 查询与该代码进行通信。

一些服务器代码从 xml 文件中读取一个值。我在定义请求和响应参数类型的服务器代码中定义了这些接口：

// define the key and value pairing for the file
export interface PersistentFileValues {
  initialValue: number;
  repaymentChanges: DatedValue[];
}

// queries should provide a key that matches the pairing
export interface GetPersistentFileValueRequestQuery {
  itemKey: keyof PersistentFileValues;
}

// define type that gets the value type given a key
export type PersistentFileValue<T extends keyof PersistentFileValues> =
  PersistentFileValues[T];

// make GetPersistentFileValueResponseBody depend on GetPersistentFileValueRequestQuery
export interface GetPersistentFileValueResponseBody<
  T extends GetPersistentFileValueRequestQuery
> {
  value: PersistentFileValue<T['itemKey']>;
}

如果我使用 createApi，并且有一个名为 getPersistentFileValue 的端点，我该如何进行输入，以便挂钩根据作为参数提供的密钥找出 return 类型？

目前我有：

endpoints: (builder) => ({
    getPersistentFileValue: builder.query<
      PersistentFileValue<keyof PersistentFileValues>,
      GetPersistentFileValueRequestQuery
    >({
      query: (queryData) => {
        return {
          url: constructGetPersistentFileValueUrl(queryData), // appends the data as a string to the url
          method: 'get',
        };
      },
      transformResponse: (result, _meta, arg) => {
        const out = result as GetPersistentFileValueResponseBody<typeof arg>;
        return out.value;
      },
    }),
...

似乎没有任何类型错误。但是，当我使用钩子时：

const { data: repaymentChanges } = useGetPersistentFileValueQuery({
  itemKey: 'repaymentChanges',
});

我发现 repaymentChanges 的类型太笼统了，如果我尝试获取长度属性，我会收到错误消息属性。

我如何输入内容以便挂钩让我访问正确类型的数据？有更好的方法吗？

在此之前，我为从文件访问的每个值创建了一个端点，但这看起来很笨拙。

Answer 1

由于 RTK 查询在内部映射类型以创建那些新函数签名，任何类型的 generics/overloads 都会丢失。您最好的选择是使用 RTK Query-generated 挂钩，将其包装在您自己的函数中并为此提供重载。

如何使用 RTK 查询和打字稿使查询挂钩 return 类型取决于参数类型？

How do I make a query hook return type depend on parameter type using RTK query and typescript?

typescript

rtk-query