React-apollo: Fetch policy `cache-and-network` awaits network response

[far1s]

Hi, I'm trying to find the optimal fetch policy for my use case. As far as I can see cache-and-network would be the perfect one since I'm fetching stock prices for a chart I want always new prices. I want to deliver the previously cached response to the user but fetch new prices in the background, so that the next time the user goes to that chart is almost actuall.

Intended outcome:
For the fetch policy cache-and-network I would expect the query first to return the previous cached response but fetch the new query in the background.

Actual outcome:
The new query is avaited. The loading prop is beeing truthy until a new result is returned. The response is taking much longer then with cache-first.

How to reproduce the issue:

1. Create two Queries one with cache-first, one with cache-and-network fetch policy
2. Compare both and see that cache-and-network takes much longer.

Version

• [email protected]
• [email protected]

[JoviDeCroock]

I have answerred this aswell in another issue, according to what I assume we should have some additional prop telling us instead of loading=true, reloading=true. This way we have a way of knowing stale data is being refreshed and an elegant way of showing the previous data.

Can I propose a more clear title, for example Fetch-policy "cache-and-network" indicates loading when refreshing stale data. Or something like that?

[danilobuerger]

@far1s Please supply a minimal reproducible sample.

[far1s]

@danilobuerger Actually @JoviDeCroock is completely right. I didn't know that the result is actually not awaited. The loading prop is just set truthy during the call. I just removed the loading prop and the (cached) result was immediately there.

This was my code previously:

<Query
    query={PRICES}
    variables={{ symbol, range }}
    fetchPolicy="cache-and-network"
>
    {({ data, loading }) => {
        const { prices = [] } = data;

        // chart is not loaded untill loading is falsy
        return <Chart loading={loading} values={prices} {...props} />;
    }}
</Query>

To test my assumption, I just changed it to:

<Query
    query={PRICES}
    variables={{ symbol, range }}
    fetchPolicy="cache-and-network"
>
    {({ data }) => {
        const loading = false;
        const { prices = [] } = data;

        // chart is loaded with cached data
        return <Chart loading={loading} values={prices} {...props} />;
    }}
</Query>

In conclusion the problem is indeed that the loading prop is beeing truthy and for people that rely on it and want fast responses it beeing set wrong for this fetch policy imo.

[danilobuerger]

Alright. So this is not a bug but documented behaviour. See https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-loading

Feature requests should be opened in https://github.com/apollographql/apollo-feature-requests.

[yss14]

So is there any way to only show a loading indicator if the query had a cache miss and is loading data from the network?
As described by @far1s loading is not suitable for this. And networkStatus can also not be used for that purpose, because after running the query once, it will always return setVariables, regardless of whether there is a cache result or not.