passing queryFn: skipToken and enabled: true triggers onError of queryClient.queryCache

[averageokguy]

Describe the bug

first and foremost, react-query is so fkn awesome, so thx. i'm also not 100% positive this is a defect or if it's intentional behavior, so apologies if this is the wrong forum/not at all a defect

we use query hooks all over the place, many of which have required query parameters or required values that are part of the request object. we've previously been using the enabled property for each individual hook call. recently, we've transitioned to calculating the enabled property in each of our use<REQUEST_TYPE>Hook.ts files since we know in advance if a certain parameter is empty/undefined, the queryFunction should not run. rather than setting enabled: calculatedEnabled, we're opting for queryFn: calculatedEnabled ? <ASYNC_FN> : skipToken. no problems so far

now, we're in a situation where we need to add the enabled property back to our hook invocations where the enabled value is dependent on something totally unrelated to query params/request object properties. eg, imagine we have a query that requires a userId query parameter (something we know in advance and can account for in use<REQUEST_TYPE>Hook.ts file) but only needs to run in one application if the user is age 18 or older (enabled property in app code totally unrelated to query param/request object)

we've noticed when we DON'T have the appropriate query params/request object properties, but in the given app context the query should enabled (specifically, queryFn: skipToken, enabled: true), we run into the following type error:
Error: Missing queryFn

the request is never made, which is exactly what we want, but the error callback is still triggered

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/agitated-sun-3x2tzj?file=%2Fsrc%2FApp.tsx%3A9%2C33

Steps to reproduce

codesandbox is pretty simple/straightforward/representative of the issue we're facing

Expected behavior

if skipToken is passed as queryFn, ignore enabled property altogether and don't throw type error

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

MacOS

Tanstack Query adapter

react-query

TanStack Query version

v5.25.0

TypeScript version

v5.3.3

Additional context

preciate any help/insight/advice 🙏

[TkDodo]

but in the given app context the query should enabled (specifically, queryFn: skipToken, enabled: true), we run into the following type error:
Error: Missing queryFn

if enabled is true, you cannot provide a skipToken. skipToken wants to set enabled: false, so those two settings collide. We need a queryFn to run a query, I hope that's obvious.

This is also (somewhat) documented here, but feel free to make a PR to the docs to clarify that no fetch can run when skipToken is set, so if you try it (by manually calling refetch or by setting enabled:true alongside skipToken), it will fail.

the request is never made, which is exactly what we want, but the error callback is still triggered

the request isn't made because the Query errors out, so it goes into error state, which isn't what you want.

https://codesandbox.io/p/sandbox/agitated-sun-3x2tzj?file=%2Fsrc%2FApp.tsx%3A9%2C33

This link doesn't work for me. Is the sandbox public ?

Bottom line is: you can't combine the two (skipToken and enabled). Just put whatever condition you have in enabled into the condition for the skipToken.