fetchMore loop on render does not update data

[Arno500]

Issue Description

Hello, I noticed that when trying to loop on results to get multiple pages from a query, if we are too fast (like just after the render), the data property returned does not update. In the reproducer, you can see that the fetch is properly triggered using a useEffect at the beginning, the newData are fetched properly, but the cache is not updated at all, thus never causing the useEffect to run again.

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-t7c2zv?file=src%2Fcomponents%2FPaginatedQuery.tsx,src%2Fapp%2Flayout.tsx

Reproduction Steps

1. Quickly fetchMore data in the initial render
2. Observe the data not being updated visually nor logically
3. We still properly see the component rerendering (according to the console.log)

@apollo/client version

3.9.5

[jerelmiller]

Thanks @Arno500! This is super useful. We'll dig into it when we can 🙂

[Arno500]

Thank you for your time, first ;) !

[jerelmiller]

Some notes while playing around with the reproduction:

Seems the issue is related to React transitions. If I remove the startTransition around the fetchMore call, the list is updated as expected. I'll have to dig into this a bit more to understand what's happening under the hood. Here is my fork of the reproduction which shows that removing the startTransition will render the list as expected.