React Query with TypeScript - how to force the rule that the query key always needs to be an array

Question

I am new in TypeScript and we want to somehow "extend" the existing useQuery hook from react-query by the rule that the query key needs to be an array keys with 2 items at least. Something like

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

how to "extend" the useQuery hook
how to add such a type in TS

Thank you in advance

it worth creating a simple wrapper, for instance useQuery2 which will call useQuery under the hood — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Jun 24, 2022 at 8:23

3Dos · Accepted Answer · 2022-06-24 08:23:43Z

2

You could write a more strict Data type like such:

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

This is a tuple telling the compiler Data should at least contain 2 elements and can contain "an infinity" more

Replace the any's with the actual type you need to use. This will result in errors when trying to use something else than an array of length < 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.

From what I gathered here https://react-query.tanstack.com/guides/query-keys queries base type is string | unknown[] so you can try to follow this typing closely with something like this:

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

or in your case, simply restrict it to the string type:

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

edited Jun 24, 2022 at 8:23

answered Jun 24, 2022 at 8:12

3Dos

3,5474 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zuy BK Over a year ago

This is my first time hearing about Tuple type. Thank you for detailed explanation!!

Collectives™ on Stack Overflow

React Query with TypeScript - how to force the rule that the query key always needs to be an array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related