GraphQL 是一种用于 API 的查询语言和运行时环境。作为一个新兴的 API 技术，GraphQL 具有不少优势，如精简请求、模块化开发、独立于后端的灵活性等。其中，查询和变异是 GraphQL 的两个核心概念，也是大多数前端开发者需要掌握的知识点。本文将深入剖析 GraphQL 中查询和变异的实现、优势和使用技巧，并提供一些实例代码和实践建议。
查询
GraphQL 中的查询是指前端请求数据的过程。相比传统的 RESTful API，GraphQL 的查询有三个显著的特点：
- 精简请求。GraphQL 的查询很容易精确地描述前端需要的数据，避免了过度请求和浪费带宽的情况。开发者可以通过定义自己的类型和字段，实现任意深度和复杂度的查询。
- 多字段输出。GraphQL 可以在一个请求中返回多个字段，而不需要额外的请求。这不仅提高了前端的性能，还增加了灵活度，因为前端可以请求自己需要的字段。
- 独立于后端。GraphQL 的查询和后端的数据模型是解耦的，即前端与后端可以自由地定义和改变各自的数据结构和查询方式，而不影响对方。
下面是一个简单的查询示例：
-- -------------------- ---- -------
----- -
-------- -- -
----
---
----- -
--
-----
-------
-
-
-这个查询表示我们要获取用户 ID 为 1 的姓名、年龄和他所有的帖子列表。其中，user 是一个自定义类型，包含字段 name、age 和 posts。posts 是一个列表类型，包含字段 id、title 和 content。
变异
GraphQL 中的变异是指前端修改后端数据的过程。相比传统的 RESTful API，GraphQL 的变异有以下优势：
- 精准操作。GraphQL 的变异很容易精确地描述前端需要的修改操作，而不需要额外的 GET、PUT 或 DELETE 请求。
- 批量操作。GraphQL 可以在一个请求中执行多个变异，而不需要额外的请求和循环。这不仅提高了前端的性能，还增加了可靠性，因为前端可以保证所有操作都成功或者都失败。
- 数据响应。GraphQL 可以在变异结果中返回被修改的数据，方便前端直接更新视图。
下面是一个简单的变异示例：
mutation {
addPost(userId: 1, title: "Hello World", content: "This is a post.") {
id
title
content
}
}这个变异表示我们要在用户 ID 为 1 的用户下添加一篇名为 "Hello World"，内容为 "This is a post." 的帖子。它会返回新帖子的 id、title 和 content。注意到这个变异使用了 mutation 关键字代替了查询中的 query 关键字。
实践建议
最后，我们来谈一谈 GraphQL 的实践建议。作为前端开发者，掌握 GraphQL 查询和变异是必要的，但是还需要注意以下细节：
- 设计合理的查询和变异结构。根据实际业务需求，合理定义类型和字段，避免字段过多或者过少，同时设计清晰的输入和输出结构。
- 缓存查询结果。由于 GraphQL 查询结果是可预测的，我们可以根据查询的参数来缓存结果，避免重复查询和浪费带宽。
- 使用 GraphQL 执行器。目前已有很多成熟的 GraphQL 执行器，如 Relay 和 Apollo，它们都提供了方便的 API 以及缓存机制，值得借鉴和使用。
结论
GraphQL 中的查询和变异是其核心概念，也是前端开发者需要掌握的重要技巧。精简请求、多字段输出和独立于后端是 GraphQL 查询的三个优势；精准操作、批量操作和数据响应是 GraphQL 变异的三个优势。合理设计结构、缓存结果和使用执行器是我们在实践中需要注意的细节。相信通过本文的介绍和示例代码，读者已经对 GraphQL 中的查询和变异有了更深刻的理解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efd5636fbf960197310549