10 执行基本查询操作

在上一篇文章中，我们讨论了如何定义GraphQL架构，具体讲解了如何定义子类型与枚举。这为我们后续的查询与变更操作打下了基础。本篇将重点关注如何执行基本的查询操作，以便从服务器获取所需数据。

什么是查询操作

在GraphQL中，查询操作是用来请求数据的一种方式。与传统REST API URL路径的方式不同，GraphQL允许你使用一个请求获取所需的所有数据，能够精确到字段层级。因此，开发者能够更高效地获取数据，避免了多次请求。

基本查询语法

要执行一个基本查询，我们首先需要构建一个查询字符串。查询字符串包括要请求的字段和相关类型。下面是一个简单的示例，展示如何获取用户的 id 和 name。

{
  users {
    id
    name
  }
}

以上示例中，我们请求了 users 的列表，并且为每个用户请求了 id 和 name 字段。

使用 Apollo Client 执行查询

为了在现代应用程序中方便地执行查询操作，我们通常使用一些客户端库，例如 Apollo Client。接下来，我们将展示如何使用 Apollo Client 执行上述查询。

1. 安装 Apollo Client

首先，确保你已安装了 Apollo Client 库：

npm install @apollo/client graphql

2. 设置 Apollo Client

创建一个 Apollo Client 实例以连接到你的 GraphQL API：

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql', // 替换为你的 API 地址
  cache: new InMemoryCache()
});

3. 执行查询

使用 useQuery Hook 执行查询操作：

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

// 定义查询
const GET_USERS = gql`
  {
    users {
      id
      name
    }
  }
`;

function UsersList() {
  const { loading, error, data } = useQuery(GET_USERS);

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

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>
          {user.name} (ID: {user.id})
        </li>
      ))}
    </ul>
  );
}

在上面的代码中，我们使用 gql 标签定义了查询，并利用 useQuery Hook 发送请求来获取用户数据。数据加载时显示 “Loading…”，若发生错误，则显示错误信息。

测试查询操作

通过启动你的 GraphQL 服务器并运行前面的组件，你应该能看到用户列表被成功渲染。确保你的服务器提供了 users 查询以及必要的解析器。

处理查询变量

在实际应用中，查询往往需要某些变量。通过在查询中定义变量，可以动态地获取数据。以下是一个例子，展示如何根据用户的 ID 来查询特定用户的详细信息。

定义带变量的查询

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

上述查询中，我们定义了一个 GetUser 查询，并且需要一个变量 $id。

在 Apollo Client 中传递变量

在 Apollo Client 中使用带有变量的查询如下所示：

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

function UserDetail({ userId }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

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

  return (
    <div>
      <h2>{data.user.name}</h2>
      <p>Email: {data.user.email}</p>
    </div>
  );
}

在这个例子中，我们传递了 userId 作为变量，以便获取单个用户的详细信息。

总结

通过本篇文章的学习，我们了解了如何在GraphQL中执行基本的查询操作，以及如何在Apollo Client中实现这些查询。我们从简单的用户列表查询开始，逐步深入到带有变量的查询功能。这样的灵活性使得GraphQL在处理复杂数据交互时更具优势。

接下来的文章中，我们将继续讨论查询与变更操作中的变更操作实现，敬请期待！