web-dev-qa-db-ja.com

react-apollo gql、TypeError：Object（...）は関数ではありません

アポロプロバイダーにラップしているAppコンポーネントがあります。

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（...）は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 9e0e85e19ef23469e6e6：6f6） （bootstrap 9e0e85e19ef23447e3e2：87）at Object ../ src/components/Main/Main.js（Contact.js：4）at webpack_require（bootstrap 9e0e85e19ef23447e3e2：669）at fn（bootstrap 9e0e85e2e：8787347e3） 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：71 9

このエラーはどこから、なぜ発生し、何を意味しますか？ gqlを使用してクエリを定義している行を指しています

javascriptreactjsapollo
7
Miha Šušteršič

これは既知の問題のようです- こちら を参照してください。インストールしてみてくださいgraphql-tagおよびこのライブラリからgqlをインポートしています。

9
AranS

まだ同じ問題が発生する場合は、apollo-boostを使用してインポートしてみてください

import { gql } from 'apollo-boost'

0
SoldierCorp