Using a setState inside a startTransition with a fetchMore cause Apollo to clear cached results when using a policy about apollo-client HOT 10 CLOSED

Hey @Arno500 👋

I've got a fix for this issue in #11706 and have confirmed this addresses the problem. See my fork of the reproduction which uses a snapshot build from that PR for a working example.

from apollo-client.

Hey @Arno500 👋

I'll dig into this a bit more deeply, but as an FYI, something that stands out immediately is that React doesn't support async functions inside startTransition. From the React docs:

The function you pass to startTransition must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as transitions. If you try to perform more state updates later (for example, in a timeout), they won’t be marked as transitions.

Its possible something is happening here that gets React in a weird state. Transitions essentially render your component in 2 different states at the "same time", one with the new value, and one with the old value. Its possible the async function might be doing something weird here and confusing React.

I'll play around with your demo a bit to understand if this is the root issue, but just wanted you to know that React doesn't support async functions for startTransition 🙂

from apollo-client.

Thank you very much for that thorough explanation. Then how would you recommend reacting on only the new values?
I mean, in this case, I want to check that the incoming value (and not the total data) is empty. So how would it pan out with Apollo?

from apollo-client.

It would mostly be a matter of moving some code around.

Here is a version that uses a synchronous callback, but allows you to wait for the data to finish:

  const fetchMoreData = async () => {
    console.log('Probably have more data: ', hasMore);
    if (!hasMore) return;
    let promise!: Promise<ApolloQueryResult<any>>;

    startTransition(() => {
      promise = fetchMore({
        variables: {
          limit: 5,
          offset: data.histories.length,
        },
      });
    });

    const { data: newData } = await promise;

    console.log('Just received data: ', newData);
    if (newData.histories.length < 1) {
      console.log('Out of data, we consumed everything');
      setHasMore(false);
    }
  };

I threw this into my own fork of the reproduction, but looks like it doesn't really change much. So it seems like its likely an Apollo Client bug!

from apollo-client.

I can reproduce this issue in my code as well.

I used this workaround of using readyQuery to solve temporarily this issue :
#11315 (comment)

from apollo-client.

@DenisLaboureyras can you please verify that you are still experiencing this in 3.9.6?

from apollo-client.

@phryneas yes unfortunately i'm still experiencing this in 3.9.6.
As stated by @Arno500, the last fetchMore with an empty incoming array is reseting the cache

from apollo-client.

Some discovery notes:

I think I've narrowed this down to something in QueryReference itself. We are emmitting the wrong result on the promise. The cache seems fine and contains the full data set, we just are giving the wrong value from the hook.

from apollo-client.

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

from apollo-client.

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.

from apollo-client.