努力解决“ApolloProvider 未传递客户端实例。”

Question

我已经阅读了多篇文章和项目试图解决这个问题。我认为我格式化代码的方式有问题，但无法找出错误所在的位置。我目前只是试图将任何内容传递到页面上，以便我可以开始格式化网站。

这是我的页面代码，如果我需要添加其他文件代码，请告诉我：

App.js

import './App.css';
import { ApolloProvider } from "@apollo/client";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from './pages/Home'
import Footer from './components/Footer'
import Header from './components/Header'


function App() {
  return (
    <ApolloProvider>
      <Router>
        <Header />
        <Routes>
          <Route
            path="/"
            element={<Home />}
            />
        </Routes>
        <Footer />
      </Router>
    </ApolloProvider>
  );
}

export default App;

index.js

import { StrictMode } from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById('root')
const root = createRoot(rootElement)

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

package.json

  "dependencies": {
    "@apollo/client": "^3.5.8",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^0.2.4",
    "graphql": "^15.4.0",
    "apollo-link": "^1.2.14",
    "apollo-link-error": "^1.1.13"

Home.js

import React from 'react'

const Home = () => {
    return (
        <main> 
            <p>This is the home page! Hello </p>
        </main>
    )
}

export default Home

这是我收到的错误：

Answer 1

根据 Apollo 文档，您需要创建一个指向 GraphQL 服务器的客户端：

const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <Router>
        <Header />
        <Routes>
          <Route
            path="/"
            element={<Home />}
            />
        </Routes>
        <Footer />
      </Router>
    </ApolloProvider>
  );
}