queryKey is not inferred when using queryOptions

[AlexMeah]

Describe the bug

v5.61.0 breaks queryKey inference, I think as a result of this change 3fa4b7c

Example

import { queryOptions as queryOptions1 } from "react-query-5-60-6";
import { queryOptions as queryOptions2 } from "react-query-5-61-0";

queryOptions1({
  queryKey: ["test"] as const,
  queryFn: () => fetch("https://example.com"),
}).queryKey;
// ^? (property) queryKey: readonly ["test"] & { [dataTag...

queryOptions2({
  queryKey: ["test"] as const,
  queryFn: () => fetch("https://example.com"),
}).queryKey;
// ^? (property) queryKey: QueryKey & { [dataTag...

We use queryOptions to create query factories and have invalidation helpers that rely on the queryKey type.

Failing test: a77db3e

Your minimal, reproducible example

https://stackblitz.com/edit/rq-querykey-infer?file=index.ts&view=editor

Steps to reproduce

/

Expected behavior

queryKey should be inferred when using queryOptions

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS
Chrome

Tanstack Query adapter

react-query

TanStack Query version

5.61.0

TypeScript version

5.5.4

Additional context

No response

[TkDodo]

Thanks, I think I broke this with:

• fix(types): make sure queryOptions are passable to UseQueryOptions #8317

If you want, you can take a stab at fixing it while retaining the functionality of that PR ?

[AlexMeah]

Is the goal of #8317 to avoid having to specify all the generics?

This works on v5.60.6 prior to #8317:

function somethingWithQueryOptions<
  TQueryFnData extends unknown,
  TError,
  TData,
  TQueryKey extends QueryKey,
>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>) {
  return options.queryKey
}

const options = queryOptions({
  queryKey: ['key'] as const,
  queryFn: () => Promise.resolve({ a: 1 }),
  select: (v) => v.a,
})

somethingWithQueryOptions(options)

or

function somethingWithQueryOptions<TError, TQueryKey extends QueryKey>(
  options: UseQueryOptions<number, TError, number, TQueryKey>,
) {
  return options.queryKey
}

const options = queryOptions({
  queryKey: ['key'],
  queryFn: () => Promise.resolve(1),
})

somethingWithQueryOptions(options)

[Nick-Lucas]

This look like it will be fixed by: #8394