react-apollo gql, TypeError: Object(...) is not a function [英] react-apollo gql, TypeError: Object(...) is not a function
问题描述
我有一个 App
组件,我将它包装到 apollo 提供程序中:
import React, { Component } from "react";从mobx-react"导入{观察者,提供者};import { BrowserRouter as Router } from "react-router-dom";从样式组件"导入样式;import { ThemeProvider } from "styled-components";//图QL从apollo-client"导入{ ApolloClient};import { createHttpLink } from "apollo-link-http";import { setContext } from "apollo-link-context";import { InMemoryCache } from "apollo-cache-inmemory";从./components/Main/Main"导入 Main;从./components/Navigation/Navigation"导入导航;从react-apollo"导入{ ApolloProvider};const httpLink = createHttpLink({uri: "myUri"});const authLink = setContext((_, { headers }) => {//如果存在,则从本地存储中获取身份验证令牌const token = "myToken";//将标头返回到上下文,以便 httpLink 可以读取它们返回 {标题:{...标题,授权:令牌?`Bearer ${token}` : null}};});const mozaikClient = 新 ApolloClient({链接:authLink.concat(httpLink),缓存:新的 InMemoryCache()});@观察者类 App 扩展组件 {使成为() {返回 (<ThemeProvider theme={theme}><ApolloProvider 客户端={mozaikClient}><提供者{...this.props.stores}><路由器><div className="app-container"><导航/><主要/>
</路由器></提供者></ApolloProvider></ThemeProvider>);}}导出默认应用程序;
然后我有我想要使用提供程序数据的 About 组件:
import React, { Component } from "react";从react-apollo"导入 { gql, graphql };类关于扩展组件{使成为() {返回<div>关于组件.</div>;}}const landPageQuery = gql`查询登陆页面{文件(类型:[着陆]){项目 {ID... 关于 LandingDocument {登陆人像{ID网址}问候内容}}}}`;导出默认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
这似乎是一个已知问题 - 请参阅 此处.尝试安装 graphql-tag
并从此库中导入 gql
.
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;
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);
I am getting the following error:
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
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(...) is not a function的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!