query results are undefined during loading (due to breaking change in @apollo/client v3)

There was an intentional breaking change in Apollo Client 3.0.0.

When refetching or when using loadMore, results and totalCount revert temporarily to undefined.

For in-depth information and debate, see threads like

• https://github.com/apollographql/apollo-client/blob/46706b53cd36a073800e9abbd4788d0b72c0dab2/CHANGELOG.md#react,
• https://github.com/apollographql/apollo-client/issues/7038#issuecomment-694569198
• https://github.com/apollographql/apollo-client/issues/6603

It could impact Vulcan in a number of ways, but so far I have only been looking at multi2.js. See Vulcan discussion at https://vulcanjs.slack.com/archives/C2LJQHTLP/p1601657376018800

A possible solution is to update to @apollo/client@3.3.0-beta.6 and override useQuery. Or change https://github.com/VulcanJS/Vulcan/blob/78d0e99dd8cde19b6da04561c27a8e040ef8ae7f/packages/vulcan-core/lib/modules/containers/multi2.js#L110-L113 to something like this:

  const { refetch, networkStatus, error, fetchMore, graphQLErrors, data, previousData } = returnedProps
  const existingData = data ?? previousData
  const results = existingData && existingData[resolverName] && existingData[resolverName].results;
  const totalCount = existingData && existingData[resolverName] && existingData[resolverName].totalCount;

[eric-burel]

results is a Vulcan specific shortcut (btw in NPM version I renamed it documents for consistency with mutations) so we are free to implement whatever default behaviour we want, no need for an option, and I think what you proposed is the best approach as it prevents a breaking change in Vulcan. People can still access the default data object from Apollo if they want the default behaviour.

[GraemeFulton]

I’m using oldschool react classes, so keep the results in component state. Then I check and update the results in componentDidUpdate, and render from the state’s copy:

    constructor(props) {
        super(props)
        this.state = {
            results: props.results
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.props.results && (this.props.results != prevProps.results)) {
            if (this.props.results.length > 0) {
                this.setState({
                    results: this.props.results
                })
            }
        }
    }

render() {
  <>
      {this.state.results && this.state.results.map(user => {
        return (
          <ProfileCard user={user} />
          );
      }) 
    }
  </>
}

Then showing loading state based on whether there are results:

{(!this.props.results && this.props.results!==0) && 'Loading...'}

It’s not ideal but does the trick for now