在 React useEffect Hook 中使用 GraphQL-JavaScript中文网-JavaScript教程资源分享门户

在构建前端应用程序时，React 是一个非常强大的框架。它提供了很多便捷方法和库，可以帮助我们构建功能强大的应用程序。其中最有用的可能就是useState和useEffect。

useState 用于在函数组件中定义状态，而 useEffect 则用于管理副作用。对于副作用，我们通常指对浏览器之外的环境进行操作，例如获取数据或更改路由等等。本文将介绍如何在 useEffect Hook 中使用 GraphQL。

什么是 GraphQL？

GraphQL 是一个用于 API 的查询语言和运行时。它允许前端应用程序通过定义需要获取的数据来指定数据的形状。GraphQL 还提供总结信息，可以让前端应用程序优化网络请求并缓存数据。

在这个例子中，我们将使用 Apollo 客户端连接到 GraphQL 服务。我们假设您已经了解了如何设置 Apollo 客户端以连接到服务，并且将重点放在如何在 useEffect Hook 中使用 GraphQL。

使用 useEffect Hook 与 GraphQL 获取数据

为了演示如何使用 GraphQL 获取数据，我们将创建一个示例程序。在我们的示例程序中，我们将使用 GitHub 的 GraphQL API 来检索所有 GitHub 上的公共存储库的所有信息。为了达到这个目的，我们首先需要安装依赖项。

npm install apollo-boost graphql

查询

要从 GraphQL API 中获取数据，我们需要定义一个查询。查询的构造和 GraphQL 语法有关。这是我们的查询：

{
  search(query: "stars:>100", type: REPOSITORY, first: 10) {
    edges {
      node {
        ... on Repository {
          name
          url
          updatedAt
        }
      }
    }
  }
}

这个查询将返回第一次搜索结果中 100 个以上星标的公共存储库的名称，URL 和更新时间。查询遵循这些步骤：

搜索存储库并使用查询字符串用于搜索。
搜索结果的类型是 REPOSITORY，我们只需要前 10 个结果。
在搜索结果中，我们需要每个存储库的名称、URL 和更新时间。

查询的实现

我们将查询放在一个单独的文件中。我们称它为github.js。以下代码显示了具有查询的内容。

import gql from 'graphql-tag';

export const GET_REPOS = gql`
  {
    search(query: "stars:>100", type: REPOSITORY, first: 10) {
      edges {
        node {
          ... on Repository {
            name
            url
            updatedAt
          }
        }
      }
    }
  }
`;

这将定义一个名为GET_REPOS的查询。

定义 React 组件

我们需要一个组件，我们将在其中使用此查询。在示例应用程序中，我们将使用函数组件来定义我们的组件。以下代码显示了组件：

import React, { useState, useEffect } from 'react';
import { useQuery } from '@apollo/react-hooks';
import { GET_REPOS } from './github';

export default function App() {
  const [repositories, setRepositories] = useState([]);

  const { loading, error, data } = useQuery(GET_REPOS);

  useEffect(() => {
    if (data) {
      const repos = data.search.edges.map((edge) => edge.node);
      setRepositories(repos);
    }
  }, [data]);

  return (
    <div>
      <h1>GitHub Repositories</h1>
      {loading && <p>Loading...</p>}
      {repositories.map((repo) => (
        <div key={repo.url}>
          <h3>
            <a href={repo.url}>{repo.name}</a>
          </h3>
          <p>Last updated: {repo.updatedAt}</p>
        </div>
      ))}
    </div>
  );
}

这个代码片段显示了我们展示查询结果的代码。在这里，我们使用了useQueryHook，用于将查询与 Apollo 客户端进行绑定。如果查询正在加载，则显示一条正在加载的消息。否则，我们将显示所有存储库的名称，并提供最后更新时间的信息。

总结

本文介绍了如何在 useEffect Hook 中使用 GraphQL。我们还提供了一个演示我们如何使用 useEffect Hook 与 Apollo 客户端和 GitHub 的 GraphQL API 获取数据的示例。当我们定义好查询之后使用它们并不是有问题的，而是在了解使用 Hook 时如何更好地将它们整合在一起。现在，你可以在你的 React 应用程序中使用 GraphQL 来获取数据了！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65af9629add4f0e0ff90879a