node.js - react + GraphQL : Could not find "client" in the context or passed in as an option

Question

我正在尝试使用 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.

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

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

2. Remove installed modules / check for mismatched versions - 没有明显的差异。

   • 尝试过ApolloProvider来自 react-apollo和@apollo/react-hooks .
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) 上时显示错误上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)

Answer 1

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

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