Using an external component display name helper.

app/helpers/get-display-name.js

@@ -1,8 +0,0 @@
-/**
- * Gets the display name of a JSX component for dev tools.
- * @param {Object | Function} component - A JSX component.
- * @returns {String} The component display name.
- */
-export default function getDisplayName({ displayName, name }) {
-  return displayName ? displayName : name && name !== '' ? name : 'Unknown'
-}

app/helpers/with-data.js

@@ -1,8 +1,8 @@
 import { Component } from 'react'
 import { ApolloProvider, getDataFromTree } from 'react-apollo'
+import getDisplayName from 'react-display-name'
 import Head from 'next/head'
 import initApolloClient from './init-apollo-client'
-import getDisplayName from './get-display-name'
 
 export default ComposedComponent => {
   return class WithData extends Component {

app/package-lock.json

@@ -4619,6 +4619,11 @@
       "resolved": "https://registry.npmjs.org/react-deep-force-update/-/react-deep-force-update-2.1.0.tgz",
       "integrity": "sha512-mzaG67FKON++K2UioBUWrVR4b8TgKQVlhGkYOsD4CxzFgj8jnF8tb7TslC6k2NN5VXNWNKN2g+EqkCuoVT5X0A=="
     },
+    "react-display-name": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.3.tgz",
+      "integrity": "sha1-9QIE1DDJyoGbwLreAwbpF12NGYc="
+    },
     "react-dom": {
       "version": "15.6.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz",

app/package.json

@@ -7,6 +7,7 @@
     "next": "^3.0.3",
     "react": "^15.6.1",
     "react-apollo": "^1.4.11",
+    "react-display-name": "^0.2.3",
     "react-dom": "^15.6.1",
     "zoo": "^0.1.9"
   },