useQuery with fetchPolicy: 'standby' returns loading state as true when there is no loading happening

[aweppc]

I have a component that draws a chart with some statistical data. There are 4 filters for that data. I have a useQuery hook that looks like this:

    const {
        data,
        loading,
        error,
        refetch,
    } = useQuery<ActivitiesQueryV2, ActivitiesQueryV2Variables>(
        ACTIVITIES_QUERY_V2,
        { variables, fetchPolicy: 'standby' }
    );

Variables for the query represent filters and are fed into component from parent component. I use 'standby' fetch policy due to the fact that we need to fetch data only when all filters are set and "Draw chart" button is pressed (which causes refetch to be called) and not on any change to any of the filters (due to performance reasons)

Intended outcome:
I expected the loading field of useQuery result to be true only during active refetch and to be false during initial render and consequent re-renders that shouldn't cause query fetching by themselves

Actual outcome:
useQuery returns result with loading set to true on initial render that stays true until refetch is called. Once refetch completes and component re-renders with new data, loading is set to false. Once the component re-renders again with different query variables - then the faulty behaviour reintroduces itself - data fetching is skipped, but loading is set to true once again

How to reproduce the issue:
https://codesandbox.io/s/loving-margulis-jy573
Here I've changed the following:

• changed useQuery to use standby fetch policy
• added a Fetch persons button to trigger refetch

You can see that initially component renders with Loading... instead of emptiness due to the issue. As soon as you click the Fetch persons button, everything will work as normal.
Haven't implemented the case with updating variables, because this is a part of another issue that was acknowledged in this commentary.

Versions
System:
OS: macOS Mojave 10.14.6
Binaries:
Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
Browsers:
Chrome: 87.0.4280.88
Firefox: 69.0.1
Safari: 14.0.1

tried on @apollo/client versions 3.2.5 and 3.3.6 (which appears to be in the latest tag at this moment)

[aweppc]

tried to work around this issue by using networkStatus, but it's at NetworkStatus.loading value as well

[aweppc]

Just in case anyone will bump into same issue and it's not resolved - here's the simplest (but dirtiest nevertheless) workaround that helped me

• added onCompleted: () => setIsLoading(false) to useQuery options - handles first fetch
• added setIsLoading(true) before a call to refetch(variables)
• added .then(() => setIsLoading(false)) after refetch(variables) call, since it returns promise that resolves on refetch completion

Still, would like this issue to be taken care of, just to keep code clean of what I did here, when possible

[atrn0]

we need to fetch data only when all filters are set and "Draw chart" button is pressed (which causes refetch to be called) and not on any change to any of the filters (due to performance reasons)

You can probably use useLazyQuery for this purpose.

https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually

The useLazyQuery hook is perfect for executing queries in response to events other than component rendering.