How to get fresh data in useEffect after query is invalidated?

[silmer]

Hello,
I have the following query:

const itemQuery = useQuery({
        queryFn: async () => await getSingleItem(idToFetch),
        queryKey: ["listItem", idToFetch],
        enabled: idToFetch!= undefined && idToFetch> 0,
    });

I then have the following useEffect:

useEffect(() => {
    if (itemQuery.data) {
            console.log(itemQuery.data);
    }
}, [itemQuery.data]);

The first time the query is called, this works well and the dependency triggering the useEffect contains the new data. However, on subsequent refetches, the network call still runs (and I can see the expected data returned in the Tanstack cache using the dev tools), but the dependency in useEffect always (except for during initial fetch) contains the value of the previous (cached) result, rather than the new value. The useEffect runs twice when the refetch happens: The first time, data is logged as undefined. The next time, it is logged as the previous cache value.

What am I doing wrong?

---

Update: I figured out that the useEffect actually triggers twice. First with the old value, then with the new. I could resolve this by using usePrevious or similar to compare the two values. But surely there's a better way? Or is this expected - that the data variable should be "updated" with the cached value when the refetch starts, and then updated with the new value when it is completed?

---

Update 2: My current workaround is to manually await the refetch() method and disable the query the rest of the time. But since the library fronts using querykeys to handle the enabled state and data, I'm still interested in your suggestions.

[TkDodo]

Please show a stackblitz or codesandbox reproduction showing your issue.