时间戳

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

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

问题描述

错误信息：

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

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

useQuery(LINK_QUERY)正在返回上面的错误。我试过使用 switch useQueryto <Query> ... </Query>，但并没有解决问题。我也尝试过重构index.js文件并使用这里ApolloHooksProvider提到的。这里提到的解决方案也没有解决问题。

代码块：

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

谢谢！

标签： reactjsgraphqlapollo-client

解决方案

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

这需要一点重构。这并不是那么疯狂的变化。

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

推荐阅读