reagieren-apollo gql, Typeerror: Object (...) ist keine Funktion

Question

Ich habe eine App Komponente, die ich in einen apollo Anbieter am Einwickeln:

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; 

Dann habe ich die Über-Komponente, die ich will

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); 

ich erhalte den folgenden Fehler::

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

Wo und warum ist t die Provider-Daten zu konsumieren sein Fehler kommt von, und was bedeutet es? Es zeigt auf die Zeile, wo ich meine Abfrage mit gql

Answer 1

definiere Dies scheint wie ein bekanntes Problem - siehe here. Versuchen Sie, graphql-tag zu installieren und gql aus dieser Bibliothek zu importieren.