TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.76k stars 2.92k forks source link

queryOptions passed to QueryClient.fetchQuery produce a Typescript error #8063

Closed rlaffers closed 2 months ago

rlaffers commented 2 months ago

Describe the bug

An options object created with queryOptions should be possible to be passed to the fetchQuery method on the query client instance. However, if the queryFn resolved value includes undefined, a TS error is generated:

Type 'QueryBehavior<number[] | undefined, Error, number[], string[]>' is not assignable to type 'QueryBehavior<number[] | undefined, Error, number[] | undefined, string[]>'

Reproduction here

If I change the queryFn to always resolve with an array, the problem goes away. The same options are OK to be passed to useQuery.

Remarks

This error started occuring since @tanstack/react-query@5.51.18.

Your minimal, reproducible example

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRwK4FMoE8DyYbAQB2AzgDRyonoCKG2FVt9WAwgDbDpHwC+cAMygQQcAOQABGAENSMgMYBrAPRR00+TAC0aTFjEAoA-OIl4EfIVJwAvChZ4CpgBQIDce3oDS6LAC44AG0xYBh0EBIxAF0KOHdPbAAxIgDpEiwieThnAEpbAD5sgFlpGAALADooWQATEVy4QoAGCoBWOAB+IIBGCgAmCgBmKLgA1CIa9AFgInQanLIDXhyAbiMBcc0rSmoASTCIhrcPDzUYVCgiHeY9ZwsnUjzlZThAUHI4AHdoRRIl9c2HoJ0DB5GV9uESEd4h4THI4PJONx4HYmHQ9BwuDxctC4GcLlcEZiYBUBMDQWjsHdLKYni9ACtkcAAKgBlOCYYRQP5AA

Steps to reproduce

See the repro. There is a TS error on line:

return client.fetchQuery(options)

Expected behavior

QueryClient.fetchQuery should accept the options object created with queryOptions without Typescript errors. The options object contains queryKey and queryFn.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

TS playground

Tanstack Query adapter

react-query

TanStack Query version

5.56.2

TypeScript version

v5.6.2

Additional context

No response

TkDodo commented 2 months ago

good that it errors on fetchQuery. undefined is not allowed to be returned from the queryFn - this will also yield a runtime console error and it will put your query straight into error state:

https://github.com/TanStack/query/blob/50315acbb39d0c18dbb8343bfd2e13c1ac588b6f/packages/query-core/src/query.ts#L491-L500

The error goes away if you return null instead:

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRwK4FMoE8DyYbAQB2AzgDRyonoCKG2FVt9WAwgDbDpHwC+cAMygQQcAOQABGAENSMgMYBrAPRR00+TAC0aTFjEAoA-OIl4EfIVJwAvChZ4CpgBQIDce3oDS6LAC44AG0xYBh0EBIxAF0KOHdPbAAxIgDpEiwieThnAEpbAD5sgFlpGAALADooWQATEVy4QoAGCoBWOAB+IIBGCgAmCgBmKLgAolR2dhyyA14cgG4jAVRMpyJKagBJMIiGtw8PNRhUKHWmOj1nCzWSPOVlOEBQcjgAd2hFElmllc0rQXQYPIyttwiQ9vEPCY5HB5JxuPA7OcWBwuDxchC4EcTutYaiYBUBACgRdsFdLKY7g9ACtkcAAKgBlOCYYRQL5AA

We haven't really gotten around to making that requirement type-safe, I know there have been some tries in v5 but we didn't ship it. That's why it doesn't error on useQuery, or even on queryOptions itself.

All in all, I think this behaviour is fine and expected. Please don't return undefined from the queryFn