[^3.0.0] data is undefined while loading

Intended outcome:

Let’s take the example from your website:

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

function DogPhoto({ breed }) {
  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
  );
}

when the breed variable changes, it should set loading = true and return the past data until it resolves.

Actual outcome:

when the breed variable changes, it sets loading = true and returns undefined for data until it resolves.

How to reproduce the issue:

See the example above. This used to work in Apollo 2.x. I think it has to do with the cache, but there is nothing mentioned on the docs. This is indeed an app-breaking bug.

Versions

[SachaG]

I’m a bit late to the discussion but I just wanted to mention this change broke the UI for multiple of my apps and I didn’t notice the issue for a while… If it was changed on purpose, it should certainly have been highlighted in huge red type in the Apollo Client release notes or migration guide!

[benjamn]

@mrtnbroder This was an intentional change introduced in AC3 by #6566 to fix #6039, and listed as a [BREAKING] change in CHANGELOG.md:

• [BREAKING] Results with loading: true will no longer redeliver previous data, though they may provide partial data from the cache, when available. @benjamn in #6566

It’s fair to say this hasn’t been a popular change, but the only way I can see to restore reasonable behavior (so that #6039 remains fixed) would be to provide result.previousData separately from result.data, as I proposed in https://github.com/apollographql/apollo-client/issues/6603#issuecomment-658803488.

The old behavior was ambiguous, because result.data could either be a cache result for the new variables, or a stale result for some older/different variables. If we’re going to be providing stale data when variables change, it needs to come clearly labeled (e.g. result.previousData).