title: react-apollo gql, TypeError: Object(...) is not a function
body: <p>I have a <code>App</code> component that I am wrapping into a apollo provider:</p>
  
  <pre><code>import React, { Component } from "react";
  import { observer, Provider } from "mobx-react";
  import { BrowserRouter as Router } from "react-router-dom";
  import styled from "styled-components";
  import { ThemeProvider } from "styled-components";
  
  // graphQL
  import { ApolloClient } from "apollo-client";
  import { createHttpLink } from "apollo-link-http";
  import { setContext } from "apollo-link-context";
  import { InMemoryCache } from "apollo-cache-inmemory";
  
  import Main from "./components/Main/Main";
  import Navigation from "./components/Navigation/Navigation";
  
  import { ApolloProvider } from "react-apollo";
  
  const httpLink = createHttpLink({
    uri: "myUri"
  });
  
  const authLink = setContext((_, { headers }) =&gt; {
    // get the authentication token from local storage if it exists
    const token = "myToken";
    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : null
      }
    };
  });
  
  const mozaikClient = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
  });
  
  @observer
  class App extends Component {
    render() {
      return (
        &lt;ThemeProvider theme={theme}&gt;
          &lt;ApolloProvider client={mozaikClient}&gt;
            &lt;Provider {...this.props.stores}&gt;
              &lt;Router&gt;
                &lt;div className="app-container"&gt;
                  &lt;Navigation /&gt;
                  &lt;Main /&gt;
                &lt;/div&gt;
              &lt;/Router&gt;
            &lt;/Provider&gt;
          &lt;/ApolloProvider&gt;
        &lt;/ThemeProvider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Then I have the About component that I want to consume the provider data:</p>
  
  <pre><code>import React, { Component } from "react";
  
  import { gql, graphql } from "react-apollo";
  class About extends Component {
    render() {
      return &lt;div&gt;About component.&lt;/div&gt;;
    }
  }
  
  const landingPageQuery = gql`
    query landingPage {
      documents(types: [LANDING]) {
        items {
          id
          ... on LandingDocument {
            landingPortrait {
              id
              url
            }
            greeting
            content
          }
        }
      }
    }
  `;
  
  export default graphql(landingPageQuery)(About);
  </code></pre>
  
  <p>I am getting the following error:</p>
  
  <blockquote>
    <p>About.js:10 Uncaught TypeError: Object(...) is not a function
        at Object../src/components/About/About.js (About.js:10)
        at <strong>webpack_require</strong> (bootstrap 9e0e85e19ef23447e3e2:669)
        at fn (bootstrap 9e0e85e19ef23447e3e2:87)
        at Object../src/components/Main/routes.js (routes.js:1)
        at <strong>webpack_require</strong> (bootstrap 9e0e85e19ef23447e3e2:669)
        at fn (bootstrap 9e0e85e19ef23447e3e2:87)
        at Object../src/components/Main/Main.js (Contact.js:4)
        at <strong>webpack_require</strong> (bootstrap 9e0e85e19ef23447e3e2:669)
        at fn (bootstrap 9e0e85e19ef23447e3e2:87)
        at Object../src/App.js (zen-observable.js:498)
        at <strong>webpack_require</strong> (bootstrap 9e0e85e19ef23447e3e2:669)
        at fn (bootstrap 9e0e85e19ef23447e3e2:87)
        at Object../src/index.js (Skills.js:4)
        at <strong>webpack_require</strong> (bootstrap 9e0e85e19ef23447e3e2:669)
        at fn (bootstrap 9e0e85e19ef23447e3e2:87)
        at Object.0 (styleVariables.js:17)
        at <strong>webpack_require</strong> (bootstrap 9e0e85e19ef23447e3e2:669)
        at bootstrap 9e0e85e19ef23447e3e2:715
        at bundle.js:719</p>
  </blockquote>
  
  <p>Where and why is this error coming from, and what does it mean? It is pointing to the line where I am defining my query using <code>gql</code></p>