Does enabled property validate on every render?

[MIPB]

Hi,

I am using react-query and I am trying to understand why my query is running even if the enabled property is false.

The flow is the following:

1. I enter the page. The property is a variable that is false. It does not run the query. CORRECT.
2. I make a change through a button, the property is true. It runs the query and then it turns the variable back to false. CORRECT.
3. I make any changes to the page, the query runs agains even though the variable is false. INCORRECT.

Is this the correct behaviour of react-query?

This is my code:

QUERY

  const {
    data: searchResultsQuery,
    isError: searchResultsErrorQuery,
    isLoading: searchResultsLoading
  } = useQuery(
    [
      "search: " +
        search +
        "-generator:" +
        generatorSearch +
        "-category:" +
        categorySearch,
      search,
      generatorSearch,
      categorySearch
    ],
    () => {
      return searchPrompts(categorySearch, generatorSearch, search);
    },
    {
      ...reactQueryParams,
      enabled: triggerSearch
    }
  );

UseEffect that runs when loading the query, and sets the variable to false

  React.useEffect(() => {
    if (searchResultsLoading) {
      console.log("false");
      setTriggerSearch(false);
    }
  }, [searchResultsLoading]);

The variable is changed from a button on click and its a simple SetState Function.

Thanks!

Feel free to answer here as well: https://stackoverflow.com/questions/74972004/enabled-property-of-usequery-only-works-the-first-time-react-query

[TkDodo]

can you show a reproduction? The query shouldn't run if it only has disabled observers.

[MIPB]

I think I found the root of the issue, can you confirm if what I say is true?

When the enabled property is false, the query does not run, but then the data property returns null.

[TkDodo]

no, data should return whatever the data in the cache currently is. If there is no data in the cache because the query has never run (and you haven't populated the cache in any other way), you will get back undefined (not null !)

[MIPB]

Hey! Sorry for the late answer.

I made a sandbox here that may help: https://codesandbox.io/s/admiring-violet-6e1fsv?file=/src/App.js

It has a few logs, the point I am trying to make here is:

• the variable trigger is false.
• the enabled is set to trigger variable.
• I have a useEffect running every time the data changes (data is the result from react-query)

If you follow these steps:

1. Push trigger -> You'll see a number appear on screen.
2. In this process, trigger was set to true, then to false. You can see that in the logs.
3. Change the number on the input, the big number will dissapear. That is the part I don't understand, since "trigger" is false, how is it possible that react-query is returning undefined?

Thanks for the help!

[TkDodo]

Push trigger -> You'll see a number appear on screen.

You are now observing the query with the name "query", and it has a value of 19 (the number I got).

Change the number on the input, the big number will dissapear.

I've typed a 5. We have now changed the key to go towards "query5". This is a different key, so react-query will create a new cache entry. This entry is undefined until the queryFn runs. But it doesn't run because your only observer is set to enabled: false.

---

You can see all of this better if you look at the ReactQueryDevTools :)

One way to work around it is to set keepPreviousData: true, which will show you data from the previous queryKey when keys change for as long as data of the current key is undefined.

[MIPB]

That's the piece I was missing, thank you so much!