useQuery: When a value at query key changes and that changed value results to the false in enabled option, the returned data becomes initialValue(undefined in this case).

[surajpheudin]

Code

function App() {
  const [id, setId] = useState("100");

  const { data } = useQuery([id], {
    queryFn: async () => {
      const res = await fetch(BACKEND_URL);
      return res.json();
    },
    enabled: !!id,
  });

  useEffect(() => {
    setTimeout(() => {
      setId("");
    }, 3000);
  }, []);

  console.log("data", data);

  return <></>;
}

Console Output:

data undefined
data {data: true}
data undefined

1. data is undefined initially.
2. After API request, data becomes {data: true}.
3. When id is changed to empty string after 3+ sec, data becomes undefined.

Based on my understanding, the false value in the enabled option is used to disable this query from automatically running.
But here it is also overwriting the value of data to initialValue.
Is this an expected behavior?

[TkDodo]

Is this an expected behavior?

yes.

the false value in the enabled option is used to disable this query from automatically running.

that's true.

But here it is also overwriting the value of data to initialValue.

that's not what's happening. You have two Queries in the cache. You should be able to see that when using the devtools.

• one query has the key ["100"] and the data {data: true}
• the other has the key [""] and the value undefined

when you tell useQuery: Please give me data for key [""], it will give you what is in the cache, which is undefined. Usually, it would go and fetch the data for you, but not if its disabled.

So, bottom line: if you change the key, you observe a different cache entry, which knows nothing about the other cache entry you were observing before that.

[surajpheudin]

Thank you