Get notified when data is fetched from API or Cache

[mahorad]

consider the following query where the API result is cached for ever:

[subjects, seSubjects] = useState([])
[ready, setReady] = useState(false)

const transform = (data) => {
  const transformedSubjects = ...
  setSubjects(transformedSubjects)
}

const { data: _subjects } = useQuery(
  [key], apiRESTCall,    
    {
    ...cacheForEver,
    onSettled: (data) => {
      if (!isEmpty(data)) {
        transform(data)
        setReady(true)
      }
    },
  },
)

The problem is that on my revisits to the component (not the first time) the onSettled is not invoked (since it reads from cache I believe) and my transform(data) is not run. what am I missing here?

[denisborovikov]

Why do you need any logic to be executed here if no new data comes from the API? Maybe it makes sense to execute this logic somewhere else outside of the useQuery. You can use isStale returned from the useQuery.

[mahorad]

@denisborovikov: Thanks Denis for your quick reply
That is exactly the point, It's not important at all whether the data contains values or not and I just need the logic or transform(data) to be executed outside the useQuery (as you said) but only after data is received via API or cache.

Let's go with the actual scenario. Let's say when I received the subjects I will need to transform them in order to display them in UI. Accordingly, every time subjects are fetched I call transform(data) and then the setSubjects(transformedSubjects) will cause a refresh and subjects will be displayed.

The first time query reads from API, onSettled is called and all is good. however the second time I visit the page, subjects are not shown.

[denisborovikov]

As @universse mentioned below seems useMemo will fit perfectly. I don't see the reason to duplicate the data from API in your component state, even transformed. You already have it in your useQuery.

[universse]

seems like useMemo would fit this use case better. you might want to give it a try.

const { data } = useQuery(...)
const transformedData = useMemo(() => transformData(data), [data])

[mahorad]

Thanks @universse,
useMemo certainly worked. It might be a good idea though (in my opinion) to have an event triggered when the value is settled down for good.

[universse]

I assume by revisits to the component, you mean the component will unmount and re-mount. You can consider using useEffect to trigger that event, since onSettled won't re-run.

[TkDodo]

v3 has the select option that does what you want I believe. Until then, there is useMemo or just transform within the fetch function (apiRestCall in your case) - await the result from the backend and transform it. It will be stores with that structure then in the cache, so it’s not quite the same.