“找不到Apollo客户端实例”

时间：2019-09-01 04:58:45

标签： reactjs apollo

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

  

永久违反：找不到Apollo Client实例。请确保您在树的上方叫ApolloProvider。

消息很清楚，但实际上我确实在树的上方有<ApolloProvider client={apollClient}>。

我怀疑现在正在使我的项目泛滥的数十个阿波罗库之间存在某种版本不匹配的问题，但我不知道如何解决。这是安装的东西：

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

埋在<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();
    ...

1 个答案:

答案 0 :(得分：2)

您确定<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/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",
相关问题
最新问题