react-apollo getClient未定义

时间:2018-02-19 21:13:38

标签: reactjs graphql apollo react-apollo apollo-client

我如何使用react-apollo似乎有错误。在文档之后,我试图用Apollo进行基本查询。这是我在Review页面上看到的错误。看来this.getClient是未定义的,无法调用watchQuery。

react-apollo.browser.umd.js:417 Uncaught TypeError: this.getClient(...).watchQuery is not a function
at GraphQL.createQuery (react-apollo.browser.umd.js:417)
at GraphQL.setInitialProps (react-apollo.browser.umd.js:404)
at GraphQL.componentWillMount (react-apollo.browser.umd.js:260)
etc...

以下是Review页面的代码。我创建了一个Review React Component,声明了一个调用userInfo查询的graphql-tag,并导出连接到下面的Review页面的graphql标签。

import React from 'react'
import { graphql } from 'react-apollo';
import gql from 'graphql-tag'

class Review extends React.Component {...}

const userInfoQuery = gql`
query userInfoQuery{
  userInfo {
    _id
    email
    name {
      first
      last
    }
    isVerified
  }
}`

const ReviewWithData = graphql(userInfoQuery)(Review)
export default ReviewWithData;

1 个答案:

答案 0 :(得分:0)

问题是我在root index.js文件中定义了错误的客户端。所以对于下面的代码,我导出的客户端实际上并不是正确的Apollo客户端。所以第六个导入的变量client导入了一些其他函数。学过的知识!应该更加小心!

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo';

import App from './containers/app';
import client from './services/Apollo'

const CustomerFrontendApp = (
  <ApolloProvider client={BitsyApollo.client}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ApolloProvider>
);

render(BitsyCustomerFrontendApp,document.getElementById(&#39; root&#39;));