GraphQL 使用常见操作指南-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、更强大的方式来获取和修改数据。与 RESTful API 不同，GraphQL 允许客户端指定需要的数据，从而减少了不必要的数据传输，提高了性能。本文将介绍 GraphQL 的常见操作指南，包括查询、变量、片段、指令和枚举。

查询

查询是使用 GraphQL 的最基本操作，它用于从 API 中获取数据。查询通常由字段和参数组成，例如：

{
  user(id: 1) {
    name
    email
  }
}

上面的查询将返回 ID 为 1 的用户的名称和电子邮件地址。在 GraphQL 中，查询可以嵌套，这意味着您可以获取复杂的数据结构，例如：

// www.javascriptcn.com code example
{
  user(id: 1) {
    name
    email
    posts {
      title
      content
    }
  }
}

上面的查询将返回 ID 为 1 的用户的名称、电子邮件地址以及他们的所有帖子的标题和内容。

变量

变量用于将参数传递给查询。使用变量可以使查询更具可读性和可重用性。变量在查询中使用 $ 前缀，例如：

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

在上面的查询中，$id 是一个整数型变量，它将在查询执行时被替换为实际的值。变量可以在查询中多次使用，例如：

// www.javascriptcn.com code example
query GetPostsByUser($userId: Int!) {
  user(id: $userId) {
    name
    email
    posts {
      title
      content
    }
  }
}

上面的查询将返回指定用户的所有帖子，其中 $userId 是一个整数型变量，它将在查询执行时被替换为实际的用户 ID。

片段

片段用于在查询中重复使用相同的字段集合。使用片段可以使查询更具可读性和可重用性。片段以 fragment 关键字开始，例如：

fragment UserFields on User {
  name
  email
}

在上面的片段中，UserFields 是片段的名称，User 是片段应用的类型，name 和 email 是字段集合。要在查询中使用片段，可以将片段名称放在 ... 中，例如：

// www.javascriptcn.com code example
{
  user(id: 1) {
    ...UserFields
  }
}

fragment UserFields on User {
  name
  email
}

上面的查询将返回 ID 为 1 的用户的名称和电子邮件地址，其中 ...UserFields 表示使用 UserFields 片段中定义的字段集合。

指令

指令用于在查询中应用条件逻辑。指令以 @ 前缀开始，例如：

// www.javascriptcn.com code example
{
  user(id: 1) {
    name
    email
    posts(first: 10, orderBy: "createdAt desc") {
      title
      content
    }
  }
}

在上面的查询中，first 和 orderBy 是指令，它们通过 @ 前缀指定。first 指令用于限制返回的结果数量，orderBy 指令用于指定排序方式。指令可以在查询中多次使用，例如：

// www.javascriptcn.com code example
{
  user(id: 1) {
    name
    email
    posts(first: 10, orderBy: "createdAt desc") {
      title
      content
    }
    comments(last: 5) {
      content
      author {
        name
      }
    }
  }
}

上面的查询将返回 ID 为 1 的用户的最新 10 条帖子和最新 5 条评论，其中 first 和 orderBy 指令用于帖子，last 指令用于评论。

枚举

枚举用于限制字段的取值范围。枚举值以大写字母开头，例如：

// www.javascriptcn.com code example
enum Role {
  USER
  ADMIN
}

type User {
  name: String!
  email: String!
  role: Role!
}

在上面的类型定义中，Role 是一个枚举类型，它包含 USER 和 ADMIN 两个值。User 类型中的 role 字段必须是 Role 枚举类型中定义的值之一。

示例代码

以下是一个使用 GraphQL 查询 GitHub 用户信息的示例代码：

// www.javascriptcn.com code example
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.github.com/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
  },
});

const GET_USER = gql`
  query GetUser($login: String!) {
    user(login: $login) {
      name
      email
      repositories(first: 10, orderBy: { field: STARGAZERS, direction: DESC }) {
        nodes {
          name
          description
          stargazerCount
        }
      }
    }
  }
`;

client.query({
  query: GET_USER,
  variables: { login: 'octocat' },
})
  .then(result => console.log(result))
  .catch(error => console.error(error));

上面的代码将查询 GitHub 用户 octocat 的名称、电子邮件地址和前 10 个最受欢迎的仓库，其中 process.env.GITHUB_TOKEN 是您的 GitHub 访问令牌。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d14e5aa941bf71342bf531

GraphQL 使用常见操作指南

查询

变量

片段

指令

枚举

示例代码

接着读