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.

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

The <ApolloProvider> does not wrap the graphql(DATA_QUERY)-我一直尝试完全实现此方法，直到子组件都没有影响。
Remove installed modules / check for mismatched versions-没有明显区别。
- 尝试过ApolloProvider和react-apollo的{{1}}。
Wrap a parent component with ApolloProvider-建议与＃1相同。在实践中，不确定是否会有所不同。

任何帮助将不胜感激！预先谢谢你！

index.js

@apollo/react-hooks

app.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();

blog.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;

landing.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;

package.json -相关位

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;

编辑

当我将鼠标悬停在"@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)上时显示的错误。我创建的与文章示例匹配的沙箱版本中没有错误。使我的应用程序与沙箱匹配，但是会生成此错误。

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

Landing.js

Answer 1

您的function setOutput(dAmt, dOOP, dGM) { let output = {}; Object.keys(dAmt).forEach(function(key) { output["amt" + key] = dAmt[key]; }); Object.keys(dOOP).forEach(function(key) { output["oop" + key] = dOOP[key]; }); Object.keys(dGM).forEach(function(key) { output["gm" + key] = dGM[key]; }); return output; } async function getConversionAsync(fcur, tcur, amt) { try { let response = await fetch(`https://data.fixer.io/api/convert?access_key=xxx&from=${fcur}&to=${tcur}&amount=${amt}`); let data = await response.json(); return parseFloat(data.result.toString()).toFixed(2); } catch(error) { console.log(error); // optional return 0; // or maybe return -1 to signify an error? } } async function getConvertedAmounts(inputData) { let fAmt = inputData.amount || 0; let fOOP = inputData.outofpocket || 0; let fGM = inputData.gm || 0; let cur = inputData.currency; let toCur = ["USD", "EUR", "INR", "GBP", "SGD", "AUD", "CNY", "HKD", "ARS", "AED", "MXN", "NZD", "BRL", "CAD", "SEK", "COP"]; let dAmt = {}; let dOOP = {}; let dGM = {}; for (const curCode of toCur) { dAmt[curCode] = await getConversionAsync(cur, curCode, fAmt); dOOP[curCode] = await getConversionAsync(cur, curCode, fOOP); dGM[curCode] = await getConversionAsync(cur, curCode, fGM); } return setOutput(dAmt, dOOP, dGM); } getConvertedAmounts(inputData) .then(output => { // do whatever is necessary with output }) .catch(error => { // something went wrong }); HOC是从graphql导入的，而您正在使用的react-apollo是从ApolloProvider导入的。由于这些程序包是不同的，因此您的提供商创建的上下文与HOC所寻找的上下文不同。即使您使用钩子，也完全不需要@apollo/react-hooks依赖项。只是：

@apollo/react-hooks

Answer 2

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

我无法使其正常运行，并恢复为解决该问题的原始软件包。

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

编辑

2 个答案: