despite setting the enabled option to false, useQuery still initiates a fetch

[aastronaut]

Describe the bug
After an update to 2.23.1 or 3.2.0-beta.3 I noticed that passing the option { enabled: false } to useQuery will still initiate a request when the component mounts. Where this flag was enough to prevent the hook from causing a request on mount in an earlier version (2.5.13 in my case), now I would need to create a separate component and mount it conditionally in order to regain the same wanted behavior, which would result in a lot of boilerplate.

To Reproduce
(on request if unclear)

Expected behavior
I would expect the option { enabled: false } to disable fetching completely, as that would prevent the creation of an conditionally mounted component. However, the expected behavior is unclear to me due to mismatching descriptions in docs and source code:

According to the docs automatically running is mentioned:

enabled: Boolean | unknown
    Set this to false to disable this query from automatically running.
    Actually it can be anything that will pass a boolean condition. See Dependent Queries for more information.

According to the source code automatic refetching is mentioned:

/**
 * Set this to `false` to disable automatic refetching when the query mounts or changes query keys.
 * To refetch the query, use the `refetch` method returned from the `useQuery` instance.
 * Defaults to `true`.
 */
enabled?: boolean | unknown

A clear and concise description of what you expected to happen.
Please either adapt the docs to mention that only refetching is controlled with this option, or a fix is needed for the hook to control also the fetching behavior when a component mounts.

[TkDodo]

Queries that are mounted with enabled: false should start in the idle state and should not fetch until it is enabled. This is used for orchestrating dependent queries, where you don’t have all the data to make a request initially.

So this seems like a bug to me. Can you make a codesandbox to reproduce maybe?

[TkDodo]

So, I just tested this with the latest beta (3.2.0-beta.12) and it works fine, have a look here: https://codesandbox.io/s/happy-browser-k286h

We start the query in idle state because enabled is false, and there is no request. Click the button, see the request in the browser devtools.

Maybe you were setting enabled to a falsy value rather than really setting it to false ? This is a breaking change in v3 (stated here: https://react-query-beta.tanstack.com/guides/migrating-to-react-query-3#queryoptionsenabled). Falsy values will no longer work, it needs to really be the boolean value false.

This sentence:

Actually it can be anything that will pass a boolean condition. See Dependent Queries for more information.

has also been removed from the v3 docs. It now states:

[KingAmo]

same bug to me, enable: false is set, useQuery still initiates a fetch, "react-query": "^2.23.1",

[TkDodo]

@KingAmo here is the same example from above with react-query 2.23.1: https://codesandbox.io/s/funny-bird-0ulmy

Seems to work like advertised.

If you are having problems, please create a codesandbox example of your own where the issue is reproducible.

[KingAmo]

@KingAmo here is the same example from above with react-query 2.23.1: https://codesandbox.io/s/funny-bird-0ulmy

Seems to work like advertised.

If you are having problems, please create a codesandbox example of your own where the issue is reproducible.

sorry, my fault, i use refetch in some useEffect, so there is still a initial fetch;

[TkDodo]

Also, as discussed on Discord, the object syntax has changed from nested (v2) to flat (v3), see: https://react-query-beta.tanstack.com/guides/migrating-to-react-query-3#query-object-syntax

I think we can close this issue.

[evliu]

Also, as discussed on Discord, the object syntax has changed from nested (v2) to flat (v3), see: https://react-query-beta.tanstack.com/guides/migrating-to-react-query-3#query-object-syntax

I think we can close this issue.

But what if you are not using query object syntax? The main docs themselves don't use an object
https://react-query-beta.tanstack.com/reference/useQuery

[evliu]

Actually it looks like my version of this bug is when i'm using usePaginatedQuery, either with object syntax or not

[TkDodo]

Okay, can you post an example with that please? FYI, there will be no usePaginatedQuery in v3, it’s just useQuery with keepPreviousData set to true: https://react-query-beta.tanstack.com/guides/migrating-to-react-query-3#usepaginatedquery

[evliu]

I just used the example for Pagination in the docs and set enabled to false hardcode. I'll just upgrade to v3.

[TkDodo]

I just used the example for Pagination in the docs and set enabled to false hardcode. I'll just upgrade to v3.

If that's all you did, why can't you fork the example and post the link here to the non-working version? That would make it a lot easier for us ...

Anyways, I did exactly that: https://codesandbox.io/s/sleepy-wave-z16lt

You'll end up in a runtime error if you only do that, because you are in idle state then, and the example doesn't check that. So I added that check too. Apart from that, I only have one query now in idle state and there is no network request ...

So unless someone can show me a runnable example where something is clearly not working, or I am completely misunderstanding something here, we should close this issue please.

[evliu]

I agree with closing the issue

[aleksandrenko]

Sorry to bring back this again. But I'm able to reproduce it and it's an issue in my app.

Refresh with open dev-tools/console
https://codesandbox.io/s/dry-fast-mc2yy9?file=/src/index.js

What am I doing wrong?