useQuery() does not accept query-options when passed as a variable

[rabengraph]

Describe the bug

Given: Values for UseQueryOptions are assigned to a variable. The variable is not explicitly typed.

When passing this variable to useQuery() a type error is thrown.

In contrast, when passing the values to useQuery() inline, the same values are accepted and useQuery() infers the types properly.

Your minimal, reproducible example

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgRQK4FMoE8BiqB2AxjMBPgMJkzoAeMANHKgM7pqZZwC+cAZlBBBwA5FHQBDYgFoAjhmzCAsACgVhMs3i90MQgAsAyoJ17g+AOZwAvHHHMsROAAoEKuO7hyOAaXRYAXHAA2ki8EBDcALr0KlyB7Nh4RCRklPjUdAA8bh5BOR4ersoFJR5hEIH4qCAARpj5JVwxxR6RKgB8AJTW7XAACgIgwKwAdGLMEAA2AG7oLnA14lCB5dydKiq0kLB8BMSk+EysABLhANZO3UUNAPQ3cGaTZui2UObV6OnMgQDu0GfMBosNjyLDzLyJfArHT6IwgExmcyMCFYXwBYKhcKBACMUTWGxa7jucDAdmYcGmS2A4hqkxedle73h6UCABMIOhyfgIPA-lAAXAGup8JpPKCAIJvck2JAonBQvgwwzGGCmCzI0FowIhPhYuC4riRbhA1gJMEoyXmZjrVTKLgqIA

Steps to reproduce

Look at line 20 in the typescriptlang.org/play example.

Expected behavior

Given: Values for UseQueryOptions are assigned to a variable. The variable is not explicitly typed.

When passing this variable to useQuery(),

• useQuery should accept this variable without throwing a type error
• useQuery should infer the types from the values of the variable

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

https://www.typescriptlang.org/play

react-query version

3.39.1

TypeScript version

4.7.2

Additional context

No response

[TkDodo]

@artysidorenko could you have a look at that maybe?

[artysidorenko]

Hi @rabengraph,

On your line 6 you've specified that your query function must take a query key that's a fixed-length tuple - [{ foo: number }].

But when you initialise query-options as a variable, TS assumes the query key to be a variable-length array { foo: number }[], not a tuple (TS always does this, it's why for example it complains when you try to assign an array literal to an identical typed-tuple, but I don't think there's any plans for that to change)

I think your best bet to avoid TS complaints but maintain type-safety is to also give your variable a type to give TS a clue that the query key is a tuple not an array. Like this.

[chungweileong94]

Agree with @rabengraph.
Or you can create a query key factory that manages the query keys, which also handle type nicely. There's a good blog article from @TkDodo

[rabengraph]

Thank you for the input!
The Generic I use in my example is just not correct,
Changing the Generic from

QueryFunctionContext<
    [
        {
            foo: number
        },
    ]
>

to

QueryFunctionContext<
    ReadonlyArray<
        {
            foo: number
        }
    >
>

fixes the problem.