node.js - React + GraphQL：在上下文中找不到“客户端”或作为选项传入

问题描述

我正在尝试使用 React + GraphQL 按照本文中的步骤制作一个简单的博客。但是，与文章相反，我的博客并不存在于中 App.js，而是一个子组件。此外，我没有使用建议的 GraphCMS 服务，而是连接到 Mongo 数据库。

GraphQL 服务器工作正常。我可以独立查询它，并且在不同的实现下，我可以获得所有帖子。我放弃了这种方法，因为它过于复杂。

话虽如此，我不断收到以下错误。每当我包含<Landing />在blog.js.

Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option.

我环顾四周，找到了一些解决方案，但没有一个对我有用。

<ApolloProvider>不包装- 我已经尝试将graphql(DATA_QUERY)这种方法一直实现到子组件，但没有影响。
删除已安装的模块/检查不匹配的版本- 没有明显差异。
- ApolloProvider从react-apollo和都试过了@apollo/react-hooks。
用 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();

应用程序.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;

博客.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;

登陆.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我为匹配文章示例而创建的沙盒版本没有错误。将我的应用程序与沙盒匹配，但随后会生成此错误。

尝试了一些在线解决方案，包括此无济于事。

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)

标签： node.jsreactjsgraphqlgraphql-js

node.js - React + GraphQL：在上下文中找不到“客户端”或作为选项传入

问题描述

编辑

解决方案

推荐阅读