Apollo-client: Could not find "client" when upgrading from 3.2.7 to 3.2.8

[zeptonaut]

Intended outcome:
Upgrade from 3.2.7 to 3.2.8 without anything breaking

Actual outcome:
When I upgrade from 3.2.7 to 3.2.8, I get the following error:

Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.

Puzzlingly, all of my top-level components are wrapped in ApolloProvider:

// App.js
constructor(props) {
    super(props);
...
    this.client = new ApolloClient({
      cache,
      link: authLink.concat(httpLink),
    });
...
}

render() {
    const { isLoadingComplete, isGlobalLocked } = this.state;

    if (!isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this.loadResourcesAsync}
          // eslint-disable-next-line no-console
          onError={(error) => console.warn(error)}
          onFinish={() => {
            this.setState({ isLoadingComplete: true });
          }}
        />
      );
    }

    return (
      <ApolloProvider client={this.client}>
        <ScrollContext.Provider value={{ scrollY: this.scrollY, toggleScroll: this.toggleScroll }}>
          <MenuProvider>
            <AnalyticsProvider instance={analytics}>
              <DefaultMetaTags>
                <View style={styles.container}>
                  <UserLoadingSplashScreen />
                  <Suspense fallback={null}>
                    <LottieAnimationFreezer />
                  </Suspense>
                  {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
                  {isGlobalLocked ? (
                    <GlobalLock unlock={this.unlock} />
                  ) : (
                    <AppNavigator
                      resetFunction={this.resetBar}
                      setCurrentRoute={this.setCurrentRoute}
                    />
                  )}
                  `
                </View>
              </DefaultMetaTags>
            </AnalyticsProvider>
          </MenuProvider>
        </ScrollContext.Provider>
      </ApolloProvider>
    );
}

Just to double check, I also tried wrapping the AppLoading component - which doesn't use Apollo - in an ApolloProvider, but it had no effect. App.js is always the root of our tree.

How to reproduce the issue:
I'm frankly not super sure here: this seems pretty specific to my app.

Versions

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 12.13.0 - ~/.asdf/installs/nodejs/12.13.0/bin/node
    Yarn: 1.22.4 - ~/.asdf/installs/nodejs/12.13.0/.npm/bin/yarn
    npm: 6.12.0 - ~/.asdf/installs/nodejs/12.13.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.67
    Safari: 14.0.1
  npmPackages:
    @apollo/client: 3.2.8 => 3.2.8
    @apollo/react-hoc: 4.0.0 => 4.0.0

Suspected culprits
Looking at the changelog, it definitely seems like https://github.com/apollographql/apollo-client/pull/7371 might be responsible, but I don't fully understand the implications :-/

[benjamn]

@zeptonaut Can you check if node_modules/@apollo/react-hoc/node_modules/@apollo/client exists?

[benjamn]

In case I don't see your response right away (due to the impending 🇺🇸 🦃 holiday), you might try replacing @apollo/react-hoc with @apollo/client/react/hoc, per the migration guide. Hope that helps!

[hwillson]

As @benjamn mentioned, I'm leaning more towards @apollo/react-hoc being the issue here. Can you try removing @apollo/react-hoc, and instead use import { graphql } from '@apollo/client/react/hoc';?

[zeptonaut]

Thank you for the help! Replacing:

import { graphql } from '@apollo/react-hoc'

with

import { graphql } from '@apollo/client/react/hoc'

fixed the problem. Sorry for not reading the migration guide carefully enough! 😅