"No Apollo Client instance can be found"

Question

我正在尝试使用 import {useApolloClient} from "@apollo/react-hooks"; 中的 useApolloClient()，但出现错误：

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

消息很清楚，但我确实 <ApolloProvider client={apollClient}> 更上一层楼了。

我怀疑现在正在激增我的项目的几十个 apollo 库之间存在某种版本不匹配，但我不知道如何解决它。这是已安装的内容：

% 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>
    )
}

阿波罗-client.ts

import ApolloClient from "apollo-boost";

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

埋在<CreateBooking>某处的是：

<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

你确定<ApolloProvider client={apollClient}></ApolloProvider没有错字吗？

我不认为这是版本不匹配的问题。您能否在 <ApolloProvider></ApolloProvider 部分提供代码，从导入到 ReactDOM.hydrate 或 ReactDOM.render。

除此之外，让我尝试在这里提供我自己的代码：

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')
)

当我在自己的组件中使用它时，效果很好

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

这是我的 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",

"No Apollo Client instance can be found"

"No Apollo Client instance can be found"

apollo

reactjs

index.tsx

App.tsx

阿波罗-client.ts

Select.tsx