QueryKey is now mandatory when using QueryOptions

[Estevete]

Describe the bug

Previously, with v4, we were not setting up the queryKey in the options. Now, after updating to v5, we are required to pass the queryKey as an option.

Is this the right behavior or is it a regression?

Your minimal, reproducible example

/

Steps to reproduce

1. Define a query with UseQueryOptions options param
2. Use this query passing an options object with just refetchInterval for example.
3. TS error since we are not passing queryKey as well.

Expected behavior

I don't know if this is the right behavior or the direction to follow, but in my opinion it should be again an optional prop. Otherwise, the queryKey is defined twice (being overwritten by the options I guess). One when defining the query and another one when consuming that query with options param.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• Windows
  • Chrome

Tanstack Query adapter

react-query

TanStack Query version

5.14.0

TypeScript version

5.1.6

Additional context

No response

[TkDodo]

The queryKey is and always has been mandatory.

Otherwise, the queryKey is defined twice (being overwritten by the options I guess). One when defining the query and another one when consuming that query with options param.

Please show at least some code for this because it doesn't make much sense to me. The key is what identifies the place in the cache so without a key, nothing can work

[Estevete]

So I followed this discussion to create my own hooks #3227

Here's a code example:

export function useGroup(
  groupId: string,
  options?: UseQueryOptions<
    IGroup,
    unknown,
    IGroup,
    string[]
  >
): UseQueryResult<IGroup, unknown> {
  return useQuery({
    queryKey: ["myGroupKey", groupId],
    queryFn: () => getGroup(groupId),
    ...options
  });
}

Then, if I consume the query like:
const group = useGroup(id, { refetchInterval: 2000 });
In this line is where we get the TS error after updating to v5
Argument of type '{ refetchInterval: number; }' is not assignable to parameter of type 'UseQueryOptions<IGroup, unknown, IGroup, QueryKey>'. Property 'queryKey' is missing in type '{ refetchInterval: number; }' but required in type 'UseQueryOptions<IGroup, unknown, IGroup, QueryKey>'.ts(2345)

[TkDodo]

Your type needs to omit queryKey and queryFn because you definitely don't want consumers of your custom hook to pass those. If you're following the discussion, you've also seen my recommendation to not create such abstractions in the first place, and edge cases like this are partly responsible for this recommendation.