Apollo-client: client is not passed down by ApolloProvider

[wzup]

Intended outcome:
client in my components

Actual outcome:
No client is being passed

How to reproduce the issue:

import AWSAppSyncClient from 'aws-appsync';
import { Rehydrated } from 'aws-appsync-react';
import { ApolloProvider } from 'react-apollo';

class Foo extends Component {
    render() {
        // I should have client here. And I don't have it
        return (
            <View id={'foo'}>
                <Text>
                    Foo
                </Text>
            </View>
        );
    }
}

class App extends Component {
    render() {
        const awsClient = new AWSAppSyncClient({
            url: AppSync.graphqlEndpoint,
            region: AppSync.region,
            shouldBatch: true,
            auth: {
                type: AppSync.authenticationType,
                apiKey: AppSync.apiKey,
                // jwtToken: accessToken
            }
        });
        return (
            <ApolloProvider client={awsClient}>
                <Rehydrated>
                    <Foo />  // <= client should be here. Why it is not provided?
                </Rehydrated>
            </ApolloProvider>
        );
    }
}

And here is what I have in my Foo component. Just nothing. No client:

Versions
System:
OS: macOS High Sierra 10.13.4
Binaries:
Node: 8.11.3 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
Browsers:
Chrome: 67.0.3396.99
Safari: 11.1
npmPackages:
apollo-boost: ^0.1.4 => 0.1.5
apollo-cache-inmemory: ^1.1.0 => 1.2.0
apollo-client: ^2.0.3 => 2.3.0
apollo-link: ^1.0.3 => 1.2.2
apollo-link-http: ^1.2.0 => 1.5.4
react-apollo: ^2.1.1 => 2.1.3

[trevor-scheer]

Hey @wzup, a nested component won't receive props or context just by being a child in the ApolloProvider's tree.

To receive client as a prop, you'll want to wrap your component with withApollo.
See here: https://codesandbox.io/s/ymmp3zp4m1
I've added a log from the App component to demonstrate the difference between a component wrapped in withApollo and one that isn't.

Hope that helps!

[miaoanbang]

I am using react-redux for state management and apollo for api calls. I cannot get withApollo to work inside redux Provider as it only accept one child component. Any idea how I could access client directly from props inside child component?
So far I managed to get Query and Mutation working. My assumption is that ApolloConsumer also has access to client?

My root component looks like this:

<ApolloProvider client={client}>
    <Provider store={store}>
        <Navigator />
     </Provider>
</ApolloProvider>

[trevor-scheer]

Hey @miaoanbang, you should be able to use them interchangeably, it's just a different configuration. The difference being where you have access to the client.

withApollo: client comes in as props
ApolloConsumer: client is available inside the render function

Here's an example using ApolloConsumer:
(not sure what the issue is, but you can see the client is logged in the actual console)
https://codesandbox.io/s/xr5q8n46oq

If you're still having a problem using either of them, post a simple version of the problem using the sandbox and we can find out what the issue is.

[juligupta]

I am using withApollo but still not able to access client in the component.
Root component:

const AppWithClient = withApollo(AppNav);

export default class App extends Component {
  render() {
    return (
      <ApolloProvider client={appsyncClient}>
        <Rehydrated>
          <Provider {...stores}>
              <AppWithClient />
          </Provider>
        </Rehydrated>
      </ApolloProvider>
    )
 }
}

But still do not have access to client in the props.

[trevor-scheer]

@juligupta where are you inspecting props to find the client? Your configuration looks correct, and I'd expect the client to show up in AppNav's props.

If you're sure that you're looking in the right place, a small reproduction would make this much easier to help you track down.

This sandbox is a great jumping off point for building a quick reproduction:
https://codesandbox.io/s/7361k9q6w

[xu3u4]

I put withApolloClient and withStore in recompose as HOC, so that both client and store can be passed down.

[Taciones]

Guys I'm having the same issue it seems. I get the error that my apollo isn't inside my client and it looks like it is:

ReactDOM.render(

  <ApolloProvider client={client}>
    <Router>
      <App />
    </Router>
  </ApolloProvider>,
document.getElementById('root')
);

[abroadwin]

I'm having the same problem, but only when using the hook implementation. Swapping it out for ApolloConsumer in the same component works, so clearly the provider _is_ higher up in the tree.

[trevor-scheer]

@abroadwin I recommend opening a separate issue if it seems to be hooks related, as this issue is closed and your comment will likely go unseen. Please provide a reproduction so we can dig into the issue!

[manicode097]

I am also having the same issue.