In the Query Component, if the query is still loading, the data variable will be undefined. This behavior is due to the following line:

data: isDataFilled(data) ? data : undefined

What do you think of making data {} instead of undefined? This way, it will be possible to do destructuring of data like so:

<Query query={HEROS_QUERY}>
  {({ loading, data: { heroes } }) => {
    if (loading) {
      return null;
    }

    return (...);
  }}
</Query>

Currently, this will throw Uncaught TypeError: Cannot read property 'heroes' of undefined. With the old query HOC pattern, this was not an issue (from the docs):

const ProfileWithData = graphql(CurrentUserForLayout, {
  props: ({ ownProps, data: { loading, currentUser, refetch } }) => ({
    userLoading: loading,
    user: currentUser,
    refetchUser: refetch,
  }),
})(Profile);

Since loading was moved out of data in the new query component, I can also see why it might make more sense to keep data as undefined when loading is true. Just wanted to get some opinions. 🎉

Version [email protected]

Guys, I'm receiving the error above when I update above @apollo/[email protected] Last test with @apollo/[email protected] and @apollo/[email protected] Version 3.0.1 is the last that works for me.

TypeError: Cannot destructure property `tenant` of 'undefined' or 'null'.

My code

const {error, data: { tenant } } = useQuery(CURRENT_TENANT_QUERY);