WrappedComponent is undefined

Question

I am stuck trying to implement graphql with react-apollo and graphcool. I am following this Tutorial

My code with the request query looks like this :

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
}

Everything worked fine before I tried to add the query. Graphcool is also working, I got some data on it.

I get this error now :

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 |

Here’s the tree of the project folder :

├── 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

I have installed all the npm packages required, but I got this message when installing react-apollo package :

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

I really don’t know where this could come from, thanks for your help ! I am new on stackoverflow so tell me if I should be more precise in my explanations.

I am new to this, but I think I'm not, I am just following along the tutorial from the link I put in the post. I only changed the data. — Nov 19, 2017 at 19:23
I added this warning yarn message : [email protected]" has unmet peer dependency "apollo-client@^2.0.0" — Nov 20, 2017 at 12:12

EtienneEtienne 218 bronze badges · Accepted Answer · 2017-11-20 13:01:29Z

Finally solved, it was just an issue with the export:

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

export { InspectionTable }

as to be

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

WrappedComponent is undefined