How can I change the isLoading state to true in React Query when a refetch is triggered?

When refetchCompanies is triggered, I want to set the isLoadingCompanies state to true so this component will re-render. I only want to render the component when isLoadingCompanies is true, and not when isFetchingCompanies is true.

My object:

const {
    isLoading: isLoadingCompanies,
    isFetching: isFetchingCompanies,
    data: dataCompanies,
    refetch: refetchCompanies
} = useQuery(
    "queryCompanies",
    () => companySearchQuery(currentPage, searchTerm, token)
)

Component:

<div>
    {(!isLoadingCompanies) && companies?.map((company, index) => (
        <h3>{company?.name}</h3>
    ))}  
    {isLoadingCompanies && <LoadingDataSpinner/>}
</div>

> How can I change the isLoading state to true in React Query when a refetch is triggered?

The simple answer is: you can't. A query will be in loading state if it's fetching and has no data. So, during a refetch, given that you already have data, your query will not be in loading state.

To display a loading spinner for background refetches, you can look at the isFetching value retuned from useQuery, which will be true whenever any fetch is happening, not matter if it's the first fetch or a refetch. You can also use isRefetching to only check for refetches happening.