GraphQL 是一种用于 API 的查询语言，它的概念和实现来自于 Facebook。在 GraphQL 中，mutation 是用于对数据进行更改的操作，而这一部分在开发过程中常常成为性能瓶颈。为了优化 mutation 操作，我们需要了解它的优化方案。
GraphQL mutation 操作的问题
mutation 操作在 GraphQL 中用于数据的修改，例如增加、修改、删除数据。相比于查询操作，mutation 操作需要进行额外的数据验证和参数解析，因此通常会比查询操作慢。
另外，mutation 操作的多个请求是串行执行的，这也会影响其效率。在串行执行的过程中，每个请求的响应都需要等待前一个请求完成后才能执行。
虽然这是 GraphQL 设计上的要求，但是我们可以通过一些技巧来提升其性能。
优化方法
批量请求
GraphQL 允许我们一次发起多个请求，因此我们可以通过将多个 mutation 请求打包成一个请求来优化它的性能。这样做可以减少网络请求次数，从而提高响应速度。
以下是一个 GraphQL 批量请求的示例代码：
-- -------------------- ---- -------
-------- -
-------------- - ------ ---- ------ ------- ----- ---- -- -
--
-----
--
----------------- - --- -- ------ -------- ------- -
--
-----
-
-这个请求将会添加一本新书并修改已有的一本书，将其标题改为 "Updated Book"。
并行执行
在某些情况下，我们需要在多个 mutation 操作间实现并行执行，从而提高性能和响应速度。可以使用类似 Promise.all 的工具来实现。
以下是一个使用 Promise.all 实现并行执行的示例代码：
-- -------------------- ---- -------
----- -------------- - ---------
-------- -
-------------- - ------ ---- ------ ------- ----- ---- -- -
--
-----
-
-
---
----- ----------------- - ---------
-------- -
----------------- - --- -- ------ -------- ------- -
--
-----
-
-
---
---------------------------- ---------------------------------- -- -
-- ----
---在这个例子中，我们同时发起了两个请求，并使用 Promise.all 来等待它们同时完成，然后处理返回的响应。
优化网络请求
减少请求量和并行执行是缩短 mutation 操作时间的效果明显的方法，但优化一个请求本身也很重要。尽可能减少 GraphQL mutation 的响应数据量和请求数据的大小，对请求和响应做适当压缩和缓存都是可行的优化方案。
结论
在进行 GraphQL mutation 操作时，批量请求和并行执行可以显著地提高性能。优化网络请求也是重要的，尤其是减少请求和响应数据大小、使用适当的压缩和缓存等。最终，综合考虑这些优化方案，可以显著提升 mutation 操作性能，为前端应用的性能提供可靠保障。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a05d99babaf620fa08c83