如何解决 Apollo 的“在上下文中找不到“客户端”...”问题？答案

【问题标题】：How do I solve the "Could not find "client" in the context..." issue for Apollo?如何解决 Apollo 的“在上下文中找不到“客户端”...”问题？
【发布时间】：2021-03-12 19:38:41
【问题描述】：

错误信息：

在上下文中找不到“客户端”或作为选项传入。将根组件包裹在 <ApolloProvider> 中，或通过选项传入 ApolloClient 实例。

有人知道如何解决这个问题吗？

useQuery(LINK_QUERY) 正在返回上述错误。我尝试使用将useQuery 切换为<Query> ... </Query>，但并没有解决问题。我还尝试重构index.js 文件并使用ApolloHooksProvider 提到的here。 here提到的解决方案也没有解决问题。

代码块：

import { useQuery } from "@apollo/client";
import LINK_QUERY from "../graphql/queries/GetAllLinks";

function MakeSlug(length) {
  let slug = "";
  let characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let charactersLength = characters.length;
  for (let i = 0; i < length; i++) {
    slug += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return CheckSlug(slug);
}

function CheckSlug(slug) {
  const { loading, error, data } = useQuery(LINK_QUERY);

  if (loading) return "Loading";
  if (error) return `Error! ${error.message}`;

  return data.allLinks.map((link) => {
    if (link.slug === slug) {
      return MakeSlug(4);
    } else {
      return slug;
    }
  });
}

module.exports = MakeSlug;

完整代码： https://codesandbox.io/s/gifted-liskov-tkhtm?file=/src/services/MakeSlug.js

谢谢！

【问题讨论】：

标签： reactjs graphql apollo-client

【解决方案1】：

我重构了代码库并将所有apollo-boost 和react-apollo 依赖项更改为@apollo/client。

这需要一点重构。变化并没有那么大。

<Query> 更改为 useQuery。并且<Mutation> 更改为useMutation。就个人而言，我更喜欢 <Query> 和 <Mutation> 编写代码库的方式，但它似乎是一种更一致的方式来编写代码以使用一个依赖项而不是多个依赖项。

【讨论】：