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

Question

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

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

话虽如此，我不断收到以下错误。每当我在blog.js 中包含<Landing /> 时，它就会发生。

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

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

1. The <ApolloProvider> does not wrap the graphql(DATA_QUERY) - 我已经尝试将这种方法一直实现到子组件，但没有任何影响。

2. Remove installed modules / check for mismatched versions - 没有明显区别。

   • 从react-apollo 和@apollo/react-hooks 尝试ApolloProvider。
3. 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.js 中将鼠标悬停在graphql(blogPosts)(Landing) 上的(Landing) 上时显示的错误。我为匹配文章示例而创建的沙盒版本没有错误。将我的应用与沙盒匹配，但随后会生成此错误。

尝试了一些在线解决方案，包括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)

Answer 1

我遇到了与您相同的错误并尝试了相同的步骤。我也将其发布到了 Apollo Spectrum 论坛。当我将包更新到包括@apollo/client 在内的最新版本时，我的错误就开始了。

我无法让它工作并恢复到解决问题的原始包。