I have a App component that I am wrapping into a apollo provider:

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 }) => {

  // 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 (

      <ThemeProvider theme={theme}>

        <ApolloProvider client={mozaikClient}>

          <Provider {...this.props.stores}>

            <Router>

              <div className=app-container>

                <Navigation />

                <Main />

              </div>

            </Router>

          </Provider>

        </ApolloProvider>

      </ThemeProvider>

    );

  }

}



export default App;

Then I have the About component that I want to consume the provider data:

import React, { Component } from react;



import { gql, graphql } from react-apollo;

class About extends Component {

  render() {

    return <div>About component.</div>;

  }

}



const landingPageQuery = gql`

  query landingPage {

    documents(types: [LANDING]) {

      items {

        id

        ... on LandingDocument {

          landingPortrait {

            id

            url

          }

          greeting

          content

        }

      }

    }

  }

`;



export default graphql(landingPageQuery)(About);

I am getting the following error:

About.js:10 Uncaught TypeError: Object(...) is not a function
at Object../src/components/About/About.js (About.js:10)
at webpack_require (bootstrap 9e0e85e19ef23447e3e2:669)
at fn (bootstrap 9e0e85e19ef23447e3e2:87)
at Object../src/components/Main/routes.js (routes.js:1)
at webpack_require (bootstrap 9e0e85e19ef23447e3e2:669)
at fn (bootstrap 9e0e85e19ef23447e3e2:87)
at Object../src/components/Main/Main.js (Contact.js:4)
at webpack_require (bootstrap 9e0e85e19ef23447e3e2:669)
at fn (bootstrap 9e0e85e19ef23447e3e2:87)
at Object../src/App.js (zen-observable.js:498)
at webpack_require (bootstrap 9e0e85e19ef23447e3e2:669)
at fn (bootstrap 9e0e85e19ef23447e3e2:87)
at Object../src/index.js (Skills.js:4)
at webpack_require (bootstrap 9e0e85e19ef23447e3e2:669)
at fn (bootstrap 9e0e85e19ef23447e3e2:87)
at Object.0 (styleVariables.js:17)
at webpack_require (bootstrap 9e0e85e19ef23447e3e2:669)
at bootstrap 9e0e85e19ef23447e3e2:715
at bundle.js:719

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 gql