Reputation: 10609
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?
Upvotes: 0
Views: 7973
Reputation: 10609
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,
}
)
Upvotes: 1
Reputation: 29056
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.
Upvotes: 1