我正在尝试使用 React + GraphQL 按照此 article 中的步骤制作一个简单的博客。然而,与这篇文章相反,我的博客并不位于 App.js
,而是一个子组件。此外,我没有使用建议的 GraphCMS 服务,而是连接到 Mongo 数据库。
GraphQL 服务器工作正常。我可以独立查询它,并且在不同的实现下,我可以获得所有帖子。我放弃了这种方法,因为它过于复杂。
话虽这么说,我不断收到以下错误。它发生在我添加 <Landing />
的任何时候在blog.js
.
Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option.
我环顾四周,找到了一些解决方案,但没有一个对我有用。
- The
<ApolloProvider>
does not wrap thegraphql(DATA_QUERY)
- 我已经尝试一直实现此方法到子组件,但没有任何影响。 Remove installed modules / check for mismatched versions - 没有明显的差异。
- 尝试过
ApolloProvider
来自react-apollo
和@apollo/react-hooks
.
- 尝试过
- Wrap a parent component with ApolloProvider - 建议中与#1 没有什么不同。不确定,在实践中是否会有所不同。
非常感谢任何帮助!谢谢您,提前!
<小时/>index.js
// @ts-check
import React from 'react';
import ReactDOM from 'react-dom';
import { StoreProvider } from './context/StoreContext';
import ApolloClient from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from '@apollo/react-hooks';
import * as serviceWorker from './serviceWorker';
import App from './app';
// Have tried both with and without `/graphql` appended
const API = 'http://localhost:4000';
// const API = 'http://localhost:4000/graphql';
const client = new ApolloClient({
link: new HttpLink({ uri: API }),
cache: new InMemoryCache()
});
const Index = () => {
return (
<StoreProvider> // Used elsewhere; removing made no difference
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</StoreProvider>
);
}
ReactDOM.render(<Index />, document.getElementById('root'));
serviceWorker.unregister();
app.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import NavBar from './routes/nav/navbar';
import Home from './routes/home/home';
import Blog from './routes/blogger/blog';
const App = () => {
return (
<Router>
<NavBar />
<div className="App">
<Route path="/" exact component={Home} />
<Route path="/blog/" component={Blog} />
</div>
</Router>
);
};
export default App;
blog.js
import React from 'react';
import Header from './header';
import PostsWrapper from './landing';
const Blog = () => {
return (
<main>
<Header />
<PostsWrapper /> // <== issue is here
</main>
)
}
export default Blog;
landing.js
import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
const Landing = ({ data: { loading, blogPosts } }) => {
if (!loading) {
return (
<div className="wrapper">
{blogPosts.map(post => (
<article className="content" key={post._id}>
<h2>{post.title}</h2>
<p dangerouslySetInnerHTML={{ __html: post.description }} />
</article>
))}
</div>
);
}
return <h2>Loading Posts...</h2>
};
const blogPosts = gql`
query {
blogPosts {
_id
title
description
}
}
`;
const PostsWrapper = graphql(blogPosts)(Landing);
export default PostsWrapper;
package.json - 相关位
"@apollo/react-hooks": "^3.1.3",
"apollo-boost": "^0.4.4",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link-http": "^1.5.16",
"react-apollo": "^3.1.3",
"react": "^16.10.2",
"react-bootstrap": "^1.0.0-beta.14",
"react-dom": "^16.10.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2"
<小时/>
编辑
当我将鼠标悬停在 (Landing)
上时显示错误上graphql(blogPosts)(Landing)
在Landing.js
。我创建的与文章示例相匹配的沙箱版本没有错误。将我的应用程序与沙箱匹配,但随后生成了此错误。
尝试了一些在线解决方案,包括 this没有效果。
const Landing: ({ data: { loading, blogPosts } }: {
data: {
loading: any;
blogPosts: any;
};
}) => JSX.Element
Argument of type '({ data: { loading, blogPosts } }: { data: { loading: any; blogPosts: any; }; }) => Element' is not assignable to parameter of type 'ComponentType<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>'.
Type '({ data: { loading, blogPosts } }: { data: { loading: any; blogPosts: any; }; }) => Element' is not assignable to type 'FunctionComponent<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>'.
Types of parameters '__0' and 'props' are incompatible.
Type 'PropsWithChildren<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>' is not assignable to type '{ data: { loading: any; blogPosts: any; }; }'.
Types of property 'data' are incompatible.
Property 'blogPosts' is missing in type 'QueryControls<{}, {}> & Partial<{}>' but required in type '{ loading: any; blogPosts: any; }'.ts(2345)
最佳答案
我遇到了与您相同的错误并尝试了相同的步骤。我也将其发布到 Apollo Spectrum 论坛。当我将软件包更新到最新版本(包括@apollo/client)时,我的错误开始了。
我无法让它工作并恢复到解决问题的原始软件包。
关于node.js - react + GraphQL : Could not find "client" in the context or passed in as an option,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58495392/