Event when receiving stale data?

[makeeno]

Let 's look at the following useQuery call:

useQuery(["some-key", value], queryFn, {
  staleTime: Infinity,
  onSuccess (data) {
    doSomethingWithData(data)
  }
})

If value changes between two values (e.g., "value-1", "value-2", "value-1", etc.) then onSuccess will only be called once for each value (so twice in total), which is correct behavior according to its documentation

This function will fire any time the query successfully fetches new data or the cache is updated [...]

Though it feels think there is an event "missing" that should fire whenever data changes (onUpdate, onChange, onDataChange).

I assume I could write a useEffect instead:

const { data, isSuccess } = useQuery(["some-key", value], queryFn, {
  staleTime: Infinity
})

useEffect(() => {
  if (isSuccess) {
    doSomethingWithData(data)
  }
}, [data, isSuccess])

What do you think? Is an event "missing" or is useEffect the way to go?

[TkDodo]

we had that discussion a couple of days ago (#2911) and we actually wanted to add another onDataChanged callback, but then decided against it, because data is stable and useEffect is essentially what you want. see: #2964

[makeeno]

Ok.

I've noticed one downside still and that is if doSomethingWithData also requires value:

useQuery(["some-key", value], queryFn, {
  staleTime: Infinity,
  onDataChanged (data) {
    doSomethingWithData(data, value)
  }
})

vs.

const { data, isSuccess } = useQuery(["some-key", value], queryFn, {
  staleTime: Infinity
})

useEffect(() => {
  if (isSuccess) {
    doSomethingWithData(data, value)
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, isSuccess /*, value */])

In the 2nd case I must not add value to the dependency list (and disable the react-hooks/exhaustive-deps Eslint rule for that line); otherwise doSomethingWithData will be called with the old data but with the new value in between rerenders.

I still think there should be a separate callback to avoid that pitfall but I understand the reason why you'd rather not since it's solvable in user-land.

[TkDodo]

Hmm, once value changes and you get data from the cache directly, it should be batched to the same render. Can you create a codesandbox for this please?

[makeeno]

You're indeed correct.

In the code I'm working on I had a useDebounce wrapped around useQuery with caused the discrepancy.

Then everything is fine! Thanks.