react-apollo gql, TypeError: Object(...) is not a function

Posted 2023-03-10

【中文标题】react-apollo gql, TypeError: Object(...) is not a function

【英文标题】：

【发布时间】：2018-05-02 05:32:53

【问题描述】：

我有一个 App 组件，我将其包装到 apollo 提供程序中：

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;

然后我有我想要使用提供者数据的 About 组件：

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

我收到以下错误：

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

此错误来自何处以及为何产生，它是什么意思？它指向我使用gql定义查询的行

【参考方案1】：

这似乎是一个已知问题 - 请参阅 here。 尝试安装 graphql-tag 并从此库中导入 gql。

【讨论】：

是的，似乎文档没有正确更新 - 但从 1.0 迁移到 2.0 文档是。感谢您的帮助。

【参考方案2】：

去掉大括号。

代替：

import  gql  from 'graphql-tag';

做

import gql from 'graphql-tag';

【参考方案3】：

如果你们中的一些人仍然有同样的问题，请尝试使用apollo-boost 导入它

import gql from 'apollo-boost'