Question

我试图用react-apollo和graphcool实现graphql。我正在关注此Tutorial

我的请求查询代码如下所示：

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

const ALL_INSPECTIONS_QUERY = gql`
  # 2
  query AllInspectionsQuery {
    allInspections {
      id
      date
      observation
      note
      next
      temporality
      components
      done
    }
  }
`

// 3
export default graphql(ALL_INSPECTIONS_QUERY, { name: 'allInspectionsQuery' })(InspectionRow)

export { InspectionTable }

class InspectionRow extends React.Component {

  render() {
    if (this.props.allInspectionsQuery && this.props.allInspectionsQuery.loading) {
      return <div>Loading</div>
    }

    if (this.props.allInspectionsQuery && this.props.allInspectionsQuery.error) {
      return <div>Error</div>
    }

    const linksToRender = this.props.allInspectionsQuery.allLinks
    return (
      // some code
    );
  }
}

class InspectionTable extends React.Component {
    // some other code
}

在我尝试添加查询之前，一切正常。 Graphcool也在工作，我得到了一些数据。

我现在收到此错误：

TypeError: WrappedComponent is undefined
getDisplayName
node_modules/react-apollo/react-apollo.browser.umd.js:230

  227 |     return fields;
  228 | }
  229 | function getDisplayName(WrappedComponent) {
> 230 |     return WrappedComponent.displayName || WrappedComponent.name || 'Component';
  231 | }
  232 | var nextVersion = 0;
  233 | function graphql(document, operationOptions) {

wrapWithApolloComponent
node_modules/react-apollo/react-apollo.browser.umd.js:246

  243 | var operation = parser(document);
  244 | var version = nextVersion++;
  245 | function wrapWithApolloComponent(WrappedComponent) {
> 246 |     var graphQLDisplayName = alias + "(" + getDisplayName(WrappedComponent) + ")";
  247 |     var GraphQL = (function (_super) {
  248 |         __extends$2(GraphQL, _super);
  249 |         function GraphQL(props, context) {

./src/components/inspection.js
src/components/inspection.js:53

  50 | `
  51 | 
  52 | // 3
> 53 | export default graphql(ALL_INSPECTIONS_QUERY, { name: 'allInspectionsQuery' })(InspectionRow)
  54 | 
  55 | export { InspectionTable }
  56 |

这是项目文件夹的树：

├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── server
│   ├── graphcool.yml
│   ├── package.json
│   ├── src
│   │   ├── hello.graphql
│   │   └── hello.js
│   └── types.graphql
└── src
    ├── components
    │   ├── App.js
    │   ├── data.js
    │   ├── description.js
    │   ├── inspection.js
    │   └── maintenance.js
    ├── index.css
    ├── index.js
    └── registerServiceWorker.js

我已经安装了所有必需的npm软件包，但是在安装react-apollo软件包时收到了这条消息：

react-apollo@2.0.1" has unmet peer dependency "apollo-client@^2.0.0"

我真的不知道这可能来自哪里，谢谢你的帮助！我是stackoverflow的新手，所以告诉我在解释中是否应该更精确。

Answer 1

最后解决了，这只是导出问题：

export default graphql(ALL_INSPECTIONS_QUERY, { name: 'allInspectionsQuery' }) (InspectionTable)

至于

>>> input = "apples,1 pears,15 oranges,777 apples,-4 oranges,222 pears,1 bananas,3"
>>> parts = input.split()
>>> parts
['apples,1', 'pears,15', 'oranges,777', 'apples,-4', 'oranges,222', 'pears,1', 'bananas,3']

WrappedComponent未定义

1 个答案: