アポロプロバイダーにラップしている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
を使用してクエリを定義している行を指しています
これは既知の問題のようです- こちら を参照してください。インストールしてみてくださいgraphql-tag
およびこのライブラリからgql
をインポートしています。
まだ同じ問題が発生する場合は、apollo-boost
を使用してインポートしてみてください
import { gql } from 'apollo-boost'