React Query has a useful hook called useIsFetching (see docs), which allows checking whether a given query is currently fetching data, like so:
const queryCount = useIsFetching(['my-query-name'])
I want to do something very similar: I want to know for a given endpoint, if data has already been fetched (isFetched).
I know this is returned from the useQuery hook, but using this hook would call the endpoint again, and I want to avoid the repeated call.
Any ideas how to achieve this?
You can avoid calling the endpoint again by setting a staleTime on your query, because in that time, data will come from the cache only.
if data doesn't exist yet, it will be fetched. If you don't want that, consider queryClient.getQueryState(['my-query-name']). However, this will not create a subscription, so your component will not re-render if the query state changes.
Solved by utilizing useQuery's enabled property, which allows defining whether or not to make the request.
useQuery(
['my-query-name', requestPayload],
() => callMyEndpoint(requestPayload),
{
// ...
enabled: booleanToIndicateWhetherToEnable,
}
)