Partial QueryFilter matching breaks readonly query keys

[rapropos]

Describe the bug

There seems to be an incompatibility between the new functionality introduced in #9686 and the idea of using readonly arrays as query keys, at least the way that I have been creating them. If what I am doing is not intended to be supported, feel free to WONTFIX this and I will relax my types.

I have a codegen layer over a RPC library that creates helper objects for every endpoint in the system. Frequently, there are situations where an argument may not yet be available, for example when it is needing to be fed by the result of another query. To deal with this situation without breaking the "rules of hooks", the key generation creates things that look like so:

export interface FooArgs { fooId: string }
export const fooVerb = "Foo";
export function fooTqk(args?: FooArgs) {
  return args ? [fooVerb, args] as const : [fooVerb] as const;
}

Previous to version 5.90.8, this worked fine. With the partial query matching in place, however, attempts to pass these *Tqk objects to invalidateQueries generate type errors:

return useMutation<FooResponse, DefaultError, FooArgs>({
  [...]
  onSuccess: ([...]) => tqc.invalidateQueries(
            {queryKey: fooTqk({fooId: [...]})}),
});

This results in TS2322 errors saying that readonly ["Foo", FooArgs] | readonly ["Foo"] cannot be assigned to readonly [] | readonly ["Foo", FooArgs] | ["Foo"] | undefined, because a readonly ["Foo"] cannot be assigned to an ordinary ["Foo"].

Your minimal, reproducible example

N/A

Steps to reproduce

Pass a readonly array to invalidateQueries.

Expected behavior

readonly query keys would continue to work.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Debian sid

Tanstack Query adapter

react-query

TanStack Query version

5.90.8

TypeScript version

5.9.3

Additional context

No response

[lukasbash]

Got the same issue. In my opinion - if this is going to be a won't fix - this has to be a major release bump. I don't think it is reliable breaking the whole code base compilation when pulling a patch.
Also, is there no single usage example in here where something gets invalidated via composed key?

Discovered the issue via using openapi-react-query where query options are auto-wired.

A backwards compatibility would be very much appreciated as I cannot change the backing types like OP in this case!

[TkDodo]

Steps to reproduce
Pass a readonly array to invalidateQueries.

I’m doing that in this simple playground and it works fine:

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRQK4FMoE8DCAbYdAO3gF84AzKCEOAcgAEYBDIgZxYGMBrAeinTNOMALQBHDNjoAoaZwjt4EzLgLF4AXjhF0AdxSTVhEgAoAlLPmK4y7AGl0WOFoDadChAh0AunGZs4Kw5ZWyN1ADpgIgA3ZgIAE2YYdDRMQjYTJFCHJ1IzIA

So that statement isn’t entirely true. It starts to fail tough when you pass a key that’s a tuple of union types, e.g. const queryKey: readonly ["Foo", FooArgs] | readonly ["Foo"]

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRQK4FMoE8DCAbYdAO3gF84AzKCEOAcgAEYBDIgZxYGMBrAeinTNOMALQBHDNjoAoaZwjt4EzLgLF4AXjhF0AdxSTVhEgAoAlLPQAPSLDjASmCkPRwAYhAgBBKAHM2iJSeAJIAJgBccBxQDr5wpNLWtvDyikEQAGqYAEZwWgBEHhD5ANyJNtDwFKhEwsAK6QAqYtwmzH5sAPyRRT7+ZojScHACMKhQRHDt-nCdcADaFJ5ZUNkANFMdALpTAakccJGLyzk7zHsKHGUJcpdKhgDS6Fh5TS0mSEsQYZH5AIwAJgAzPl4hZpMpsPhjDAAHQOABuzAIoWYMHQaEwhDYHzgkKwTxepDMQA

@JosNun would you be willing to look into this issue, given that #9686 seems to have introduced this

[TkDodo]

huh I think that’s it:

• fix(types): do not drop readonly for partial QueryFilter matching #9872

[lukasbash]

Unfortunately the issue is not fixed for me with the latest version. Please reopen this!

Using computed query key types still does throw the error mentioned in #9871 (comment)

The precise error is:

ERROR(TypeScript)  Argument of type 'Omit<UseQueryOptions<({ id: number; created_at: string; updated_at: string; deleted_at?: string | undefined; } & { instance_id: number; instance?: ({ id: number; created_at: string; updated_at: string; deleted_at?: string | undefined; } & { ...; } & { ...; }) | undefined; ... 8 more ...;...' is not assignable to parameter of type 'InvalidateQueryFilters<readonly ["get", "/api/users"]> | undefined'.
  Type 'Omit<UseQueryOptions<({ id: number; created_at: string; updated_at: string; deleted_at?: string | undefined; } & { instance_id: number; instance?: ({ id: number; created_at: string; updated_at: string; deleted_at?: string | undefined; } & { ...; } & { ...; }) | undefined; ... 8 more ...;...' is not assignable to type 'InvalidateQueryFilters<readonly ["get", "/api/users"]>'.
    Types of property 'queryKey' are incompatible.
      Type 'readonly ["get", "/api/users"] | readonly ["get", "/api/users", FetchOptions<{ parameters: { query?: undefined; header?: undefined; path?: undefined; cookie?: undefined; }; requestBody?: undefined; responses: { ...; }; }>]' is not assignable to type 'readonly [] | readonly ["get"] | readonly ["get", "/api/users"] | undefined'.
        Type 'readonly ["get", "/api/users", FetchOptions<{ parameters: { query?: undefined; header?: undefined; path?: undefined; cookie?: undefined; }; requestBody?: undefined; responses: { 200: { headers: { [name: string]: unknown; }; content: { ...; }; }; default: { ...; }; }; }>]' is not assignable to type 'readonly [] | readonly ["get"] | readonly ["get", "/api/users"] | undefined'.
          Type 'readonly ["get", "/api/users", FetchOptions<{ parameters: { query?: undefined; header?: undefined; path?: undefined; cookie?: undefined; }; requestBody?: undefined; responses: { 200: { headers: { [name: string]: unknown; }; content: { ...; }; }; default: { ...; }; }; }>]' is not assignable to type 'readonly [] | readonly ["get"] | readonly ["get", "/api/users"]'.
            Type 'readonly ["get", "/api/users", FetchOptions<{ parameters: { query?: undefined; header?: undefined; path?: undefined; cookie?: undefined; }; requestBody?: undefined; responses: { 200: { headers: { [name: string]: unknown; }; content: { ...; }; }; default: { ...; }; }; }>]' is not assignable to type 'readonly ["get", "/api/users"]'.
              Source has 3 element(s) but target allows only 2.

Edit:
If helpful, I am using my global query instance QAPI which is backed by the generated types from openapi-react-query like this:

queryClient.invalidateQueries(
  QAPI.queryOptions("get", "/api/users"),
);

[TkDodo]

please show a typescript playground, I don’t have access to your specific types. Or even better, add a type test that fails, because the example provided by OP now works:

query/packages/query-core/src/__tests__/utils.test-d.tsx

Lines 64 to 74 in 6c0c797

	it('should work with readonly union types', () => {
	const filters: QueryFilters<
	readonly ['key'] | readonly ['key', 'something']
	> = {
	queryKey: ['key'],
	}
	expectTypeOf(filters.queryKey).toEqualTypeOf<
	undefined | readonly [] | readonly ['key'] | readonly ['key', 'something']
	>()
	})

[rapropos]

FWIW, I can confirm that #9872 fixes my problem in the wild. Thank you for the quick attention and the amazing library in general. Apologies for not being able to provide a directly runnable example.

[lukasbash]

please show a typescript playground, I don’t have access to your specific types. Or even better, add a type test that fails, because the example provided by OP now works:

query/packages/query-core/src/tests/utils.test-d.tsx

Lines 64 to 74 in 6c0c797

it('should work with readonly union types', () => {
const filters: QueryFilters<
readonly ['key'] | readonly ['key', 'something']

= {
queryKey: ['key'],
}

expectTypeOf(filters.queryKey).toEqualTypeOf<
undefined | readonly [] | readonly ['key'] | readonly ['key', 'something']

()
})

Can't really share a pure typescript playground but there you go with a minimal stackblitz where the backing types have been generated:

https://stackblitz.com/edit/tanstack-query-sry4nav7?file=src%2Findex.tsx

See the error on the invalidation call.

[TkDodo]

The problem seems to be that DropLast turns the QueryKey into:

readonly ["get", "/pet/findByTags"] | readonly ["get"]

but drops all the FetchOptions.

Simplified version here: https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRQK4FMoE8DCAbYdAO3gF84AzKCEOAcgAEYBDIgZxYGMBrAeinTNOMALQBHDNjoAoaZwjt4EzLgLF4AXjhF0AdxSTVhEgAoAlLJhYw6OABFqYADLMOAHgAqcdAA8YxABM2OAFmAIU8LDhUIm4iCF0iAG0AXQA+OA1pODgvX38iIJDBcKJIuCSAOmrgIgpMOAAlABpo2PjElOycuAB+YrCIqKrqxq6euAAubXQAN0wAbktrWw9UMDx0AAUBCmAfdDZPbz9A4NDS8pi4hOT0zO6808LzkqGK8Z7+i-fU7pzpmsNttdvtDm4HBBnK4YJ40hkAD65JbSKw2AwqADS6CiWh+ZWGACIAOboGCE1qE3g2GC8PaFABCWA8zGJbEJKTgSPx5SSJLJFLgVJpdNqASZLLZgoQ-zgYGYUGYIDJmDY0xlEwmymwvXVss1PRYbN1cA4UFqxNSSwNOVI1ptAAsSpgTTp5lB7Qb5TAHa65ot9T15BBuIQ-e7PXA7dJSF05AoOHBtVhsVhpmgsTjMtpUHg8HBXAWiFhluiABrZyHQ9wZ7CptLSXi8HoAPV6smT+GMMEqtVmzAIAWY-lrhDYJiQydTUbMQA

[TkDodo]

even simpler, it seems to be because of variable lengths tuples:

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRQK4FMoE8DCAbYdAO3gF84AzKCEOAcgAEYBDIgZxYGMBrAeinTNOMALQBHDNjoAoaZwjt4EzLgLF4AXjhF0AdxSTVhEgAoAlLJhYw6OABFqYADLMOAHgAqcdAA8YxABM2OAFmAIU8LDhUIm4iCF0iAG0AXQA+OA1pODgvX38iIJDBcKJIuCSAOmrgIgpMOAAlABpo2PjElOycuAB+YrCIqKrqxq6euAAubXQAN0wAbktrWw9UMDx0AAUBCmAfdDZPbz9A4NDS8pi4hOT0zO6808LzkqGK8Z7+i-fU7pzpmsNttdvtDm4HBBnK4YJ40hkAD65JbSKw2AwqADS6CiWh+ZWGACIKBAIITWoSAEbMKCElJwJH48pJYmk8lwKk09mcgBedNk8kUcGU2GxWGmaCxOMy2lQeDwcFciqIWGW6IAmjKgZsdug9gcjpLRTi0rIRUZ1JVarNmAQAsx-EbCGwTEhzWK4KQzEA

[TkDodo]

I think I got it now:

• fix(types): do not drop readonly for partial QueryFilter matching #9878