"No Apollo Client instance can be found"

Question

I'm trying to use useApolloClient() from import {useApolloClient} from "@apollo/react-hooks"; but I'm getting an error:

Invariant Violation: No Apollo Client instance can be found. Please ensure that you have called ApolloProvider higher up in your tree.

The message is pretty clear, but I do in fact have <ApolloProvider client={apollClient}> further up the tree.

I suspect there's some kind of version-mismatch between the dozens of apollo libs that are now proliferating my project, but I don't know how to resolve it. Here's what's installed:

% yarn list | grep apollo
├─ @apollo/react-common@3.0.1
├─ @apollo/react-hooks@3.0.1
│  ├─ @apollo/react-common@^3.0.1
├─ @apollographql/apollo-tools@0.4.0
│  └─ apollo-env@0.5.1
├─ @apollographql/graphql-language-service-interface@2.0.2
│  ├─ @apollographql/graphql-language-service-parser@^2.0.0
│  ├─ @apollographql/graphql-language-service-types@^2.0.0
│  └─ @apollographql/graphql-language-service-utils@^2.0.2
├─ @apollographql/graphql-language-service-parser@2.0.2
│  └─ @apollographql/graphql-language-service-types@^2.0.0
├─ @apollographql/graphql-language-service-types@2.0.2
├─ @apollographql/graphql-language-service-utils@2.0.2
│  └─ @apollographql/graphql-language-service-types@^2.0.0
├─ @apollographql/graphql-playground-html@1.6.24
├─ apollo-boost@0.4.4
│  ├─ apollo-cache-inmemory@^1.6.3
│  ├─ apollo-cache@^1.3.2
│  ├─ apollo-client@^2.6.4
│  ├─ apollo-link-error@^1.0.3
│  ├─ apollo-link-http@^1.3.1
│  ├─ apollo-link@^1.0.6
├─ apollo-cache-control@0.8.1
│  ├─ apollo-server-env@2.4.1
├─ apollo-cache-inmemory@1.6.3
│  ├─ apollo-cache@^1.3.2
│  ├─ apollo-utilities@^1.3.2
├─ apollo-cache@1.3.2
│  ├─ apollo-utilities@^1.3.2
├─ apollo-client@2.6.4
│  ├─ apollo-cache@1.3.2
│  ├─ apollo-link@^1.0.0
│  ├─ apollo-utilities@1.3.2
├─ apollo-codegen-core@0.35.0
│  ├─ apollo-env@0.5.1
│  ├─ apollo-language-server@1.15.0
├─ apollo-codegen-flow@0.33.25
│  ├─ apollo-codegen-core@0.35.0
│  ├─ apollo-env@0.5.1
├─ apollo-codegen-scala@0.34.25
│  ├─ apollo-codegen-core@0.35.0
│  ├─ apollo-env@0.5.1
├─ apollo-codegen-swift@0.35.5
│  ├─ apollo-codegen-core@0.35.0
│  ├─ apollo-env@0.5.1
├─ apollo-codegen-typescript@0.35.0
│  ├─ apollo-codegen-core@0.35.0
│  ├─ apollo-env@0.5.1
├─ apollo-datasource@0.6.1
│  ├─ apollo-server-caching@0.5.0
│  └─ apollo-server-env@2.4.1
├─ apollo-engine-reporting-protobuf@0.4.0
├─ apollo-engine-reporting@1.4.3
│  ├─ apollo-engine-reporting-protobuf@0.4.0
│  ├─ apollo-graphql@^0.3.3
│  ├─ apollo-server-caching@0.5.0
│  ├─ apollo-server-env@2.4.1
│  ├─ apollo-server-types@0.2.1
│     ├─ @apollographql/apollo-tools@^0.4.0
│     ├─ apollo-server-env@2.4.1
│     └─ apollo-server-types@0.2.1
├─ apollo-env@0.5.1
├─ apollo-graphql@0.3.3
│  ├─ apollo-env@0.5.1
├─ apollo-language-server@1.15.0
│  ├─ @apollographql/apollo-tools@0.4.0
│  ├─ @apollographql/graphql-language-service-interface@^2.0.2
│  ├─ apollo-datasource@^0.6.0
│  ├─ apollo-env@0.5.1
│  ├─ apollo-link-context@^1.0.9
│  ├─ apollo-link-error@^1.1.1
│  ├─ apollo-link-http@^1.5.5
│  ├─ apollo-link@^1.2.3
│  ├─ apollo-server-errors@^2.0.2
├─ apollo-link-context@1.0.18
│  ├─ apollo-link@^1.2.12
├─ apollo-link-error@1.1.11
│  ├─ apollo-link-http-common@^0.2.14
│  ├─ apollo-link@^1.2.12
├─ apollo-link-http-common@0.2.14
│  ├─ apollo-link@^1.2.12
├─ apollo-link-http@1.5.15
│  ├─ apollo-link-http-common@^0.2.14
│  ├─ apollo-link@^1.2.12
├─ apollo-link@1.2.12
│  ├─ apollo-utilities@^1.3.0
├─ apollo-server-caching@0.5.0
├─ apollo-server-core@2.8.2
│  ├─ @apollographql/apollo-tools@^0.4.0
│  ├─ @apollographql/graphql-playground-html@1.6.24
│  ├─ apollo-cache-control@0.8.1
│  ├─ apollo-datasource@0.6.1
│  ├─ apollo-engine-reporting@1.4.3
│  ├─ apollo-server-caching@0.5.0
│  ├─ apollo-server-env@2.4.1
│  ├─ apollo-server-errors@2.3.1
│  ├─ apollo-server-plugin-base@0.6.1
│  ├─ apollo-server-types@0.2.1
│  ├─ apollo-tracing@0.8.1
│  │  ├─ @apollographql/apollo-tools@^0.4.0
│  │  ├─ apollo-server-env@2.4.1
│  │  └─ apollo-server-types@0.2.1
├─ apollo-server-env@2.4.1
├─ apollo-server-errors@2.3.1
├─ apollo-server-express@2.8.2
│  ├─ @apollographql/graphql-playground-html@1.6.24
│  ├─ apollo-server-core@2.8.2
│  ├─ apollo-server-types@0.2.1
├─ apollo-server-plugin-base@0.6.1
│  └─ apollo-server-types@0.2.1
├─ apollo-server-types@0.2.1
│  ├─ apollo-engine-reporting-protobuf@0.4.0
│  ├─ apollo-server-caching@0.5.0
│  └─ apollo-server-env@2.4.1
├─ apollo-server@2.8.2
│  ├─ apollo-server-core@2.8.2
│  ├─ apollo-server-express@2.8.2
├─ apollo-tracing@0.8.1
│  ├─ apollo-server-env@2.4.1
├─ apollo-utilities@1.3.2
├─ apollo@2.18.0
│  ├─ @apollographql/apollo-tools@0.4.0
│  ├─ apollo-codegen-core@0.35.0
│  ├─ apollo-codegen-flow@0.33.25
│  ├─ apollo-codegen-scala@0.34.25
│  ├─ apollo-codegen-swift@0.35.5
│  ├─ apollo-codegen-typescript@0.35.0
│  ├─ apollo-env@0.5.1
│  ├─ apollo-graphql@0.3.3
│  ├─ apollo-language-server@1.15.0
│  ├─ @apollographql/apollo-tools@^0.4.0
│  ├─ apollo-server-env@2.4.1
│  └─ apollo-server-types@0.2.1
│  ├─ apollo-link@^1.2.3
│  ├─ apollo-utilities@^1.0.1
├─ react-apollo@2.5.8
│  ├─ apollo-utilities@^1.3.0

---

index.tsx

import React, {StrictMode} from 'react'
import { render } from 'react-dom'
import App from './components/App'
import './stylesheets/main.less';

render(<StrictMode><App/></StrictMode>, document.getElementById('react-root'));

App.tsx

import apollClient from '../apollo-client';
import {ApolloProvider} from "react-apollo";

const App = () => {
    return (
        <Boundary>
            <AuthContext.Provider value={{isSuper: true}}>
                <ApolloProvider client={apollClient}>
                    <AppContainer>
                        <Grid>
                            <Main>
                                <Router>
                                    <Route path={paths.newBooking} component={lazy(() => import(/* webpackPrefetch: true */ './routes/CreateBooking'))}/>
                                </Router>
                            </Main>
                        </Grid>
                    </AppContainer>
                </ApolloProvider>
            </AuthContext.Provider>
        </Boundary>
    )
}

apollo-client.ts

import ApolloClient from "apollo-boost";

export default new ApolloClient({
    uri: "http://localhost:4000"
});

Buried somewhere in <CreateBooking> is:

<Select<string> query={CUSTOMERS_QUERY} process={processResults} onChange={ev => store.set("externalId", ev.selectedItem ? ev.selectedItem.value : undefined)} value={store.data.externalId}/>

Select.tsx

import {useApolloClient} from "@apollo/react-hooks";

export function Select<TValue extends string | number>(props: SelectProps<TValue>) {
    const apolloClient = useApolloClient();
    ...

Answer 1

Are you sure there's no typo in <ApolloProvider client={apollClient}></ApolloProvider ?.

I don't think it's version mismatch problem. Could you provide code in your <ApolloProvider></ApolloProvider section, from import to ReactDOM.hydrate or ReactDOM.render.

Beside that let me try to provide my own code here:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from '@apollo/react-common'
import { InMemoryCache } from 'apollo-cache-inmemory'

const { apollo } = window.__INITIAL_STATE__

const apolloClient = new ApolloClient({
  cache: new InMemoryCache().restore(apollo),
})

ReactDOM.hydrate(
  <ApolloProvider client={apolloClient}>
    <Router>
      <App/>
    </Router>
  </ApolloProvider>,
  document.getElementById('app-view')
)

And when i use it in my own component, it works well

import { useApolloClient } from '@apollo/react-hooks'
const Login = props => {
    const client = useApolloClient()
    console.log(client) // it show the object
}

Here is my whole package libs for apollo:

    "@apollo/react-common": "^3.0.0",
    "@apollo/react-hooks": "^3.0.0",
    "@apollo/react-ssr": "^3.0.0",
    "apollo-boost": "^0.1.22",
    "apollo-cache-inmemory": "^1.3.11",
    "apollo-client": "^2.6.2",
    "apollo-link-http": "^1.5.14",