如何为RTK Query统一请求Hook定义不同返回类型？

修改API Slice中的Query定义 #

将原来固定any类型的Query改为泛型版本，让返回类型支持动态传入：

fetchData: builder.query<unknown, string>({
  async queryFn<T>(arg, _queryApi, _extraOptions, fetchWithBQ) {
    const result = await fetchWithBQ(arg);
    return result.data 
      ? { data: result.data as T } 
      : { error: result.error as unknown as FetchBaseQueryError };
  },
}),

调用Hook时指定泛型类型 #

现在生成的useFetchDataQuery Hook会支持传入泛型参数，可按期望的方式调用：

// 假设已定义UserInfo类型
const { data } = useFetchDataQuery<UserInfo>(`example/me1`);

// 假设已定义OrderList类型
const { data } = useFetchDataQuery<OrderList>(`example/me2`);

核心说明 #

• 把原有的any替换为泛型T，并在queryFn中显式声明该泛型参数，RTK Query会自动将泛型传递给生成的Hook。
• builder.query<unknown, string>中的unknown作为兜底类型，实际调用时会被传入的具体泛型覆盖。
• URL无需再断言为string，因为builder.query的第二个参数已指定为string类型，直接传入字符串即可。

内容的提问来源于stack exchange，提问作者Vahid