“找不到 Apollo 客户端实例”

Question

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

\n\n

\n

不变违规：找不到 Apollo 客户端实例。请确保您已致电ApolloProvider树中的更高层。

\n

\n\n

信息非常明确，但事实上我确实有<ApolloProvider client={apollClient}>更进一步的内容。

\n\n

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

\n\n

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

\n\n

---

\n\n

索引.tsx

\n\n

import React, {StrictMode} from \'react\'\nimport { render } from \'react-dom\'\nimport App from \'./components/App\'\nimport \'./stylesheets/main.less\';\n\nrender(<StrictMode><App/></StrictMode>, document.getElementById(\'react-root\'));\n

\n\n

应用程序.tsx

\n\n

import apollClient from \'../apollo-client\';\nimport {ApolloProvider} from "react-apollo";\n\nconst App = () => {\n    return (\n        <Boundary>\n            <AuthContext.Provider value={{isSuper: true}}>\n                <ApolloProvider client={apollClient}>\n                    <AppContainer>\n                        <Grid>\n                            <Main>\n                                <Router>\n                                    <Route path={paths.newBooking} component={lazy(() => import(/* webpackPrefetch: true */ \'./routes/CreateBooking\'))}/>\n                                </Router>\n                            </Main>\n                        </Grid>\n                    </AppContainer>\n                </ApolloProvider>\n            </AuthContext.Provider>\n        </Boundary>\n    )\n}\n

\n\n

apollo-client.ts

\n\n

import ApolloClient from "apollo-boost";\n\nexport default new ApolloClient({\n    uri: "http://localhost:4000"\n});\n

\n\n

埋在某处的<CreateBooking>是：

\n\n

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

\n\n

选择.tsx

\n\n

import {useApolloClient} from "@apollo/react-hooks";\n\nexport function Select<TValue extends string | number>(props: SelectProps<TValue>) {\n    const apolloClient = useApolloClient();\n    ...\n

\n

Answer 1

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

我不认为这是版本不匹配的问题。您能否在您的部分中提供<ApolloProvider></ApolloProvider从 import 到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",