react-apollo gql，TypeError:Object(...)不是一个函数 [英] react-apollo gql, TypeError: Object(...) is not a function

问题描述

我有一个要包装到apollo提供程序中的 App 组件:

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;

然后，我具有要使用提供程序数据的About组件:

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

我遇到以下错误:

About.js:10未捕获的TypeError:Object(...)不是函数在Object ../src/components/About/About.js(About.js:10)在 webpack_require (引导9e0e85e19ef23447e3e2:669)在fn(bootstrap 9e0e85e19ef23447e3e2:87)在Object ../src/components/Main/routes.js(routes.js:1)在 webpack_require (引导9e0e85e19ef23447e3e2:669)在fn(bootstrap 9e0e85e19ef23447e3e2:87)在Object ../src/components/Main/Main.js(Contact.js:4)在 webpack_require (引导9e0e85e19ef23447e3e2:669)在fn(bootstrap 9e0e85e19ef23447e3e2:87)在Object ../src/App.js(zen-observable.js:498)在 webpack_require (引导9e0e85e19ef23447e3e2:669)在fn(bootstrap 9e0e85e19ef23447e3e2:87)在Object ../src/index.js(Skills.js:4)在 webpack_require (引导9e0e85e19ef23447e3e2:669)在fn(bootstrap 9e0e85e19ef23447e3e2:87)在Object.0(styleVariables.js:17)在 webpack_require (引导9e0e85e19ef23447e3e2:669)在引导程序9e0e85e19ef23447e3e2:715在bundle.js:719

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

此错误来自何处，为什么产生?它是什么意思?它指向我使用 gql

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

推荐答案

这似乎是一个已知问题-请参见

This seems like a known issue - see here. Try installing graphql-tag and importing gql from this library.

这篇关于react-apollo gql，TypeError:Object(...)不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！