Apollo throws away the lazy query result data if the next call to execute function happens before the previous one was completed

Intended outcome:

I was trying to implement Booking component lazily loading pricing data as user navigates through the calendar:

function Booking() {
  const [loadMonthPricing, { called, loading }] = useLazyQuery<BookingMonth[]>(BookingMonthsQuery);
  const handleMonthChange = useCallback((month) => {
    loadMonthPricing({ variables: { month } })
  }, [loadMonthPricing]);
}

When the Chrome network option is set to “Slow 3G”, and user clicks “Next month” button multiple times in a very fast way, the component sends a network request for every single month the user went through. I expect all the data for these intermediate months to go to the Apollo cache – as we spent some resource for sending network requests.

Actual outcome: The actual outcome is: all the intermediate months data are just thrown away by Apollo. I see all the network requests are finished successfully, but the cache contains the data only for the last request.

It happens only when the users clicks fast enough. Probably when they navigate to the next month before the data for the previous month is loaded.

Probably the reason is that we call the LazyQuery execute function before the previous call to it was finished. IMHO, since we are spending some network resource on it, Apollo should handle such stale results anyway and put them into the cache.

Versions

System:
    OS: macOS 10.15
  Binaries:
    Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.6.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.67
    Firefox: 82.0.3
    Safari: 13.0.2
  npmPackages:
    @apollo/react-hooks: 3.1.5 => 3.1.5 
    apollo-cache-inmemory: 1.6.6 => 1.6.6 
    apollo-client: 2.6.10 => 2.6.10 
    apollo-link-http: 1.5.17 => 1.5.17 

[alevkon]

@alevkon Have you been able to try this with @apollo/client (v3)? In any case, I agree the previous results should be written to the cache.

Looks like v3 has some breaking changes, and the process of the migration takes some time. Will be able to tackle this within a week and get back to you. Thanks!

[hwillson]

If someone can provide a small runnable reproduction that demonstrates this happening with @apollo/client@latest, we’ll take a closer look. Thanks!