4 beta, useQuery No overload matches this call.

[mozeryansky]

Describe the bug

Type error: No overload matches this call.
  Overload 1 of 3, '(queryKey: QueryKey, options?: Omit<UseQueryOptions<[Trade], unknown, [Trade], QueryKey>, "queryKey"> | undefined): UseQueryResult<...>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'QueryKey'.
  Overload 2 of 3, '(queryKey: QueryKey, queryFn: QueryFunction<[Trade], QueryKey>, options?: Omit<UseQueryOptions<[Trade], unknown, [Trade], QueryKey>, "queryKey" | "queryFn"> | undefined): UseQueryResult<...>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'QueryKey'.

  11 |   const queryClient = useQueryClient()
  12 | 
> 13 |   const { data } = useQuery(myQueryKey, async () => {

where

export default function useMyHook() {
  const myQueryKey = 'myQueryKey'

  const queryClient = useQueryClient()

  const { data } = useQuery(myQueryKey, async () => {
     ...
  })
...

If I change it to const { data } = useQuery([myQueryKey], async () => { then it's fine, but this used to work in non-beta.

Your minimal, reproducible example

^

Steps to reproduce

useQuery with variable as key

Expected behavior

no compiler error

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

macOS

react-query version

4.0.0-beta.3

TypeScript version

4.6.3

Additional context

No response

[TkDodo]

Have you read the migration guide? Because the fact that keys need to be an array is one of the breaking changes in v4: https://react-query-beta.tanstack.com/guides/migrating-to-react-query-4