WrappedComponent не определен

Question

Я застрял, пытаясь реализовать graphql с реактивным-apollo и graphcool. Я следую этому уроку

Мой код с запросом запроса выглядит так:

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, но я получил это сообщение при установке пакета act-apollo:

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

Я действительно не знаю, откуда это может быть, спасибо за вашу помощь! Я новичок в stackru, так скажите мне, если я должен быть более точным в моих объяснениях.

Answer 1

Окончательно решено, это была просто проблема с экспортом:

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

export { InspectionTable }

как быть

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