如何用GraphQL在pages组件中查询多个数据集？

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

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      content
    }
  }
`;

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

const MyPage = () => {
  const { loading: usersLoading, data: userData } = useQuery(GET_USERS);
  const { loading: postsLoading, data: postData } = useQuery(GET_POSTS);

  if (usersLoading || postsLoading) {
    return <div>Loading...</div>;
  }

  // 处理获取到的数据
  const users = userData.users;
  const posts = postData.posts;

  // 渲染页面
  return (
    <div>
      <h1>用户列表</h1>
      {users.map(user => (
        <div key={user.id}>
          <p>{user.name}</p>
          <p>{user.email}</p>
        </div>
      ))}
      
      <h1>文章列表</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
};