Unintentionally changing queryKey on each page of infinite queries in the @tanstack/react-query plugin

[jamesmissen]

Description

Bug:

When using infinite queries in the @tanstack/react-query plugin, each page request uses the base parameters from the queryKey, plus any pagination parameters that are added for that page. However, the queryKey is accidentally altered each time this happens, with the pagination parameters unwittingly included.

The generated code does not copy the queryKey, just references it, when creating the params for a specific page. The body, headers, path and query are replaced on queryKey each time createInfiniteParams is called with different pagination parameters.

Screenshot:

Potential fix:

The generated line in createInfiniteParams:

const params = queryKey[0]

should be replaced with a copy of queryKey instead, e.g.:

const params = { ...queryKey[0] }

to prevent unintentional changes to the queryKey for the same query.

Source code reference:

openapi-ts/packages/openapi-ts/src/plugins/@tanstack/query-core/infiniteQueryOptions.ts

Lines 51 to 56 in cb651c0

	compiler.constVariable({
	expression: compiler.identifier({
	text: 'queryKey[0]',
	}),
	name: 'params',
	}),

Reproducible example or configuration

No response

OpenAPI specification (optional)

No response

System information (optional)

No response

[mrlubos]

Hi @jamesmissen, thank you for reporting the issue. Does it affect you in practice or is it more of a suggestion?

[jamesmissen]

Yes it does have effects in practice.

All queries in React Query have a query key and a query hash. The hash is used internally as a key for all data that has been fetched and is stored in the query cache. The hash is computed when new data is added to the cache, and is based on the query key. When the query key is changed by the bug the query key and query hash become misaligned for the query, which leads to all sorts of problems and unexpected internally for React Query.

In practice it means it becomes impossible to set, get, update, invalidate, clear, cancel, delete etc. queries as soon as the second page loads, Even though the query data is still in the cache, it's impossible to lookup as that has to be done publicly using the query key (which doesn't match the hash). Also there are more silent bugs that occur like React Query triggering data refetches immediately, because it doesn't know it already exists in the cache.

Essentially the problem is that the query key is stored with the query data in the cache. When that stored query key gets inadvertently changed inside the cache, it ends up accidentally breaking or making it impossible to use a lot of React Query's core functionality due to way React Query works internally.

https://tanstack.com/query/v5/docs/reference/QueryClient includes some of the methods that end up behaving weirdly - basically any use case where you would need to access/identify/lookup a query after its initial execution (i.e. everything other than fetch/prefetch/use).

[mrlubos]

I'd love to know what you're doing that made you run into this bug haha. I'll fix it but would love to hear about what you're working on

[mrlubos]

@jamesmissen this will be fixed in the next release 🙌