使用 Apollo 中的 useQuery 处理多个数据请求

在使用 React 和 Apollo 构建应用程序时，数据查询是不可避免的一部分。其中，useQuery 是 Apollo 提供的一个非常有用的钩子函数，它允许我们从 GraphQL 服务器中查询数据，并将结果返回。但是，当需要同时处理多个数据请求时，很多人就会遇到一些困难。本文将介绍如何使用 useQuery 处理多个数据请求。

最基本的用法

首先，让我们回顾一下如何使用 useQuery 处理单个数据请求。下面是一个简单的示例：

import { useQuery, gql } from '@apollo/client';

const GET_BOOKS = gql`
  query {
    books {
      title
      author
    }
  }
`;

function BookList() {
  const { loading, error, data } = useQuery(GET_BOOKS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.books.map(({ title, author }) => (
    <div key={title}>
      <p>{title}</p>
      <p>{author}</p>
    </div>
  ));
}

上面的代码定义了一个名为 GET_BOOKS 的查询，然后使用 useQuery 钩子来执行该查询。在返回的对象中，我们可以通过 data 属性获取查询结果。

处理多个数据请求

在处理多个数据请求时，可以将多个 useQuery 钩子函数串联起来，每个钩子函数负责一个数据请求。

import { useQuery, gql } from '@apollo/client';

const GET_BOOKS = gql`
  query {
    books {
      title
      author
    }
  }
`;

const GET_AUTHORS = gql`
  query {
    authors {
      name
      age
    }
  }
`;

function BookList() {
  const { loading: booksLoading, error: booksError, data: booksData } = useQuery(GET_BOOKS);
  const { loading: authorsLoading, error: authorsError, data: authorsData } = useQuery(GET_AUTHORS);

  if (booksLoading || authorsLoading) return <p>Loading...</p>;
  if (booksError || authorsError) return <p>Error :(</p>;

  return (
    <>
      <h2>Books:</h2>
      {booksData.books.map(({ title, author }) => (
        <div key={title}>
          <p>{title}</p>
          <p>{author}</p>
        </div>
      ))}

      <h2>Authors:</h2>
      {authorsData.authors.map(({ name, age }) => (
        <div key={name}>
          <p>{name}</p>
          <p>{age}</p>
        </div>
      ))}
    </>
  );
}

在上面的代码中，我们定义了两个查询（GET_BOOKS 和 GET_AUTHORS），然后在 BookList 组件中使用了两个 useQuery 钩子来执行这两个查询。由于每个钩子返回的数据都包含了 loading、error 和 data 三个属性，因此我们可以在代码中分别处理这些请求的返回结果，并在加载完成后分别渲染书籍和作者列表。值得注意的是，由于 BookList 组件返回的 JSX 中包含了多个 HTML 元素，我们需要把它们包在一个顶层元素中。

结论

在本文中，我们介绍了如何在 Apollo 中使用 useQuery 处理多个数据请求。可以将多个 useQuery 钩子函数串联起来，每个钩子函数负责一个数据请求。值得注意的是，在返回的数据中，需要使用不同的属性名来区分不同的请求。最后，希望这篇文章对你有所帮助。