花了很多时间，尝试对软件包进行了几次更改，但仍然没有任何效果。我有以下App.js组件：

import React, { Fragment } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { ApolloClient, ApolloProvider, gql, useQuery } from "@apollo/client";
import cache from "./cache";

// Components
import Landing from "./components/layout/Landing";
import Routes from "./components/routing/Routes";
import Dashboard from "./components/dashboard/Dashboard";

export const typeDefs = gql`
  extend type Query {
    isLoggedIn: Boolean!
  }
`;

const client = new ApolloClient({
  cache,
  uri: "/",
  headers: {
    authorization: localStorage.getItem("token") || "",
  },
  typeDefs,
  resolvers: {},
  dataIdFromObject: (o) => o.id,
});

const IS_LOGGED_IN = gql`
  query IsUserLoggedIn {
    isLoggedIn @client
  }
`;

function IsLoggedIn() {
  const { data } = useQuery(IS_LOGGED_IN);
  return data.isLoggedIn ? (
    <Route exact path="/dashboard" component={Dashboard} />
  ) : (
    <Route exact path="/" component={Landing} />
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <Router>
        <Fragment>
          <Switch>
            <Landing />
            <Route component={Routes} />
          </Switch>
        </Fragment>
      </Router>
    </ApolloProvider>
  );
}

export default App;

该组件包含一个Landing组件：

import React from "react";

// Components
import Login from "../auth/Login";

const Landing = () => {
  return (
    <div>
      <Login />
    </div>
  );
};

export default Landing;

...依次包含以下Login组件：

import React, { Fragment, useState } from "react";
import { Redirect } from "react-router-dom";
import { useMutation } from "@apollo/react-hooks";
import LOGIN_USER from "../../mutations/Login";

const Login = () => {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });

  const [login] = useMutation(LOGIN_USER);

  const { email, password } = formData;

  const onChange = (e) =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = (formData) => {
    login({ variables: formData })
      .then((res) => {
        localStorage.setItem("token", res.data.login.token);
        localStorage.setItem("userId", res.data.login.userId);
      })
      .then(() => <Redirect to="/dashboard" />);
  };

  return (
    <Fragment>
      <form onSubmit={onSubmit}>
        <div className="form-group">
          <input
            type="email"
            placeholder="Email address"
            name="email"
            value={email}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Password"
            name="password"
            value={password}
            onChange={onChange}
          />
        </div>
        <input type="submit" className="btn-primary" value="Sign in" />
      </form>
    </Fragment>
  );
};

export default Login;

这是 package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.2.9",
    "@apollo/react-hooks": "^4.0.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "graphql": "^15.4.0",
    "graphql-tag": "^2.11.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  }

运行项目时，我得到了Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.即使我已配置了客户端，也没有任何效果。似乎有些软件包存在问题，但是在我看来，我已经安装了正确的软件包。我在这里想念什么？