如何在 GraphQL 中正确使用 Query 和 Mutation

GraphQL 是一种用于构建 API 的查询语言，它可以让前端开发者更加灵活地获取和修改数据。在 GraphQL 中，Query 和 Mutation 是两种最常用的操作类型，本文将介绍如何正确地使用它们。

Query

Query 是用于获取数据的操作类型，类似于 RESTful API 中的 GET 请求。在 GraphQL 中，我们可以使用 Query 来获取单个对象或列表对象的数据。

查询单个对象

假设我们有一个 User 类型，包含 id、name 和 email 三个字段。我们可以使用以下 Query 来获取 id 为 1 的用户的信息：

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

这个 Query 的语法可以分为两个部分：query 和 user。query 表示这是一个 Query 操作，user 是我们要查询的对象类型。在括号中，我们可以指定一些参数，这里我们指定了 id 参数为 1。在花括号中，我们指定了我们要获取的字段，这里包括 id、name 和 email 三个字段。

查询列表对象

假设我们还有一个 Post 类型，包含 id、title 和 content 三个字段。我们可以使用以下 Query 来获取所有的 Post 列表：

query {
  posts {
    id
    title
    content
  }
}

这个 Query 的语法与上一个类似，只是我们没有指定参数，而是直接查询了所有的 Post 对象。

Mutation

Mutation 是用于修改数据的操作类型，类似于 RESTful API 中的 POST、PUT、DELETE 请求。在 GraphQL 中，我们可以使用 Mutation 来添加、修改和删除数据。

添加数据

假设我们要添加一个新的 User 对象，我们可以使用以下 Mutation：

mutation {
  addUser(name: "John", email: "john@example.com") {
    id
    name
    email
  }
}

这个 Mutation 的语法与 Query 类似，只是我们使用了 mutation 关键字，而且我们指定了 addUser 操作。在括号中，我们指定了要添加的 User 对象的属性，这里包括 name 和 email 两个属性。在花括号中，我们指定了我们要返回的字段，这里包括 id、name 和 email 三个字段。

修改数据

假设我们要修改一个已有的 User 对象，我们可以使用以下 Mutation：

mutation {
  updateUser(id: 1, name: "John Doe", email: "johndoe@example.com") {
    id
    name
    email
  }
}

这个 Mutation 的语法与添加数据的 Mutation 类似，只是我们指定了 updateUser 操作，并且在括号中指定了要修改的 User 对象的 id 属性。

删除数据

假设我们要删除一个已有的 User 对象，我们可以使用以下 Mutation：

mutation {
  deleteUser(id: 1) {
    id
    name
    email
  }
}

这个 Mutation 的语法与修改数据的 Mutation 类似，只是我们指定了 deleteUser 操作，并且在括号中指定了要删除的 User 对象的 id 属性。

总结

在 GraphQL 中，Query 和 Mutation 是两个最常用的操作类型，可以让前端开发者更加灵活地获取和修改数据。正确地使用 Query 和 Mutation 可以使我们的代码更加简洁和易于维护。希望本文能够帮助你更好地理解如何在 GraphQL 中使用 Query 和 Mutation。

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