WrappedComponent 未定义

Question

我一直在尝试使用react-apollo 和graphcool 来实现graphql。我正在关注这个教程

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

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 软件包时收到此消息：

[email protected]" has unmet peer dependency "apollo-client@^2.0.0"

我真的不知道这是从哪里来的，谢谢您的帮助！我是 stackoverflow 的新手，所以请告诉我我的解释是否应该更准确。

Answer 1

终于解决了，只是导出的问题：

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

export { InspectionTable }

就这样

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