GraphQL 是一种新兴的查询语言，它允许前端开发人员从一个端点获取精准的数据。但随着 GraphQL 查询的复杂度不断增加，数据查询也可能变得十分冗余和低效。在本文中，我们将探讨如何使用 GraphQL 防止过度查询方法（Over-fetching and Under-fetching）来优化数据查询，并提供一些示例代码进行演示。
过度查询的问题
过度查询在 GraphQL 中是一个常见的问题，它指的是在查询过程中获取过多的数据。考虑以下示例查询：
-- -------------------- ---- -------
----- -
----- -
--
----
-----
----- -
--
-----
-------
-------- -
--
----
---- -
--
----
-----
-
-
-
-
-这个查询的目的是返回所有用户、他们的文章和评论及相关用户信息。但是，这个查询可能会导致大量冗余数据的返回，因为我们没有明确说明我们想要哪些数据。例如，用户的个人信息（如头像、生日等）可能未被查询，但未经请求的用户信息会一起返回，因为 GraphQL 要求返回整个请求中定义的所有字段。
这意味着我们需要找到一种方法来减少不必要的数据加载，以提高应用的性能。
使用 Graphql Fragments
GraphQL 中有一项非常有用的功能，即片段（fragments）。片段允许我们复用查询的部分，并通过将它们定义为可重用的块来减少查询的长度。简单的说，就是定义一个查询块，然后在其他查询中引用它。
下面是一个示例查询的片段：
-- -------------------- ---- -------
-------- ---------- -- ---- -
--
----
-----
-
-------- ---------- -- ---- -
--
-----
-------
-
-------- ------------- -- ------- -
--
----
---- -
-------------
-
-可以看到，我们定义了三个片段，每个片段都定义了一个查询块。我们可以在查询中使用 ... 操作符引用这些片段：
-- -------------------- ---- -------
----- -
----- -
-------------
----- -
-------------
-------- -
----------------
-
-
-
-通过使用片段，我们可以将查询的长度缩短，并且只查询我们想要的数据。我们无需在每个查询中重复定义它们，只需在需要时引用它们。
使用变量
GraphQL 允许开发人员使用变量来传递数据。使用变量可以让我们在运行时根据需要动态生成查询并传递必要的参数。这是一个减少过度查询的好方法。
例如，如果我们需要筛选用户，我们可以使用变量来指定特定的用户 ID：
query getUsers($userId: ID!) {
user(id: $userId) {
...UserFields
}
}在调用查询时，我们可以传递一个变量，如下所示：
{
"userId": 1
}使用变量，我们可以在运行时动态生成查询，避免不必要的过度查询。
使用 DataLoader
DataLoader 是一个流行的 JavaScript 库，它可以在 GraphQL 查询中优化查询时间。它通过批量处理数据加载请求来减少来自同一查询的重复请求。需要注意的是，它必须与 Node.js 或类似 Node.js 的事件驱动的环境一起使用。
下面是使用 DataLoader 加载用户评论的例子：
-- -------------------- ---- -------
------ ---------- ---- -------------
----- ------------- - --- ----------------- -- -
----- -------- - ---------------------------
------ --------------------------
--
----- --------- - -
----- -
--------- ------ -- ----------------------------
--
--这段代码使用 DataLoader 来提高性能，同时避免了数据的重复加载。
使用 GraphQL Depth Limit 插件
对于一些特别复杂的 GraphQL 查询，其深度可能极大，Node 进程很可能因为栈溢出或 CPU 耗尽而崩溃。这时候，我们可以使用 graphql-depth-limit 来限制查询深度。
-- -------------------- ---- -------
------ ---------- ---- ----------------------
------ - ------------ - ---- -------
------ - -------- --------- - ---- ----------
------ - ------------------ - ---- -----------------------------
------ - -------------- - ---- ------------------------
------ ------- ---- ----------
------ ------ ---- -----------
----- ---- - -----
----- --- - ----------
------------------- -------------------- -- --
-------
-------- -
----
--
---------------- ----------------
-----
----- ------ - ------------------
------------------- -- -- -
-------------------- ------ ------- -- ---- -----------
---这段代码演示了如何使用 graphql-depth-limit 插件，它将限制查询深度为 6。当您的查询很深时，这将是优化查询性能的必要工具。
总结
GraphQL 非常灵活，但这也意味着可能会出现冗余或低效的查询。在本文中，我们介绍了可以用来优化 GraphQL 查询的多个技术。这些技术可以让您的应用程序更快、更可靠，并避免产生不必要的开销。记住，切勿忽视性能指标，以确保您的应用程序在运行时保持最佳状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f0f7d968c7c53b0d72e14