React Query with TypeScript-如何强制执行查询键必须始终为数组的规则

Question

我是TypeScript的新手，我们想以某种方式"延伸"；根据查询键需要是至少有2个项的数组键的规则，react query的现有useQuery钩子。类似的东西

const { data } = useQuery<Data, Error>(["module_1", "fetchA"], fetchFn); // OK
const { data } = useQuery<Data, Error>("module_1", fetchFn); // there should be TS error because queryKey is not array
const { data } = useQuery<Data, Error>(["module_1"], fetchFn); // there should be TS error because array has only 1 item

1. 如何"延伸"；useQuery钩子
2. 如何在TS中添加这样的类型

提前感谢

Answer 1

您可以编写一个更严格的Data类型，例如：

type Data = [any, any, ...any[]];

这是一个元组，告诉编译器CCD_；无穷大"；更多

将any的替换为需要使用的实际类型。当试图使用长度<2

const a: Data = [1];
// will raise a compiler error:
// Type '[number]' is not assignable to type '[any, any, ...any[]]'.
//  Source has 1 element(s) but target requires 2.

根据我在这里收集的信息https://react-query.tanstack.com/guides/query-keys查询的基本类型是string | unknown[]，所以您可以尝试使用以下内容来密切跟踪这种类型：

type QueryTuple = [unknown, unknown, ...unknown[]];
// ...
const { data } = useQuery<QueryTuple, Error>(["module_1", "fetchA"], fetchFn);

或者在您的情况下，只需将其限制为string类型：

type QueryTuple = [string, string, ...string[]];
// ...
const { data } = useQuery<QueryTuple, Error>(["module_1", "fetchA"], fetchFn);