如果你对 GraphQL 有一定的了解，你就知道数据加载是以前端为主的昂贵操作之一。在 GraphQL 系统中，后端决定了参数及其结构，而前端则需要通过获取多个数据源来填充 GraphQL 查询。有时候，这些查询会在同一个数据源中被多个人请求。
在这种情况下，技术上的挑战就是如何避免多次请求和重复数据，而 DataLoader 正好可以解决这些问题。在本文中，我们将详细介绍 DataLoader 并提供一些示例代码，以帮助你使用 DataLoader 在 GraphQL 中解决数据加载问题。
DataLoader 简介
DataLoader 是一个用于解决重复数据，减少请求数量的工具。它是一个针对 Node.js 的模块，设计用于批量加载数据，并且封装了所有的缓存、加载、处理和批处理调度，使您可以专注于数据。
它的目标是通过聚合并批量化请求，从而降低了总请求数量，同时避免了在无缓存情况下重复请求。可以安装它， npm 包名为 DataLoader。
DataLoader 的使用
下面我们来看一个简单的实例，以了解 DataLoader 的使用。
安装 DataLoader
首先，我们需要安装 DataLoader，你可以通过以下命令完成：
--- ------- ------ ----------
创建 DataLoader 对象
在创建 DataLoader 之前，我们需要定义获取数据的方法。例如，在查询语句中，我们查询一个用户的所有帖子，那么我们需要一个获取用户帖子的函数。下面是一个这样的例子：
-------- ------------------------------ -
----- ----- - -
------ -
---- -----
----- ------- -- ----------------- -- ----------------
-
------ --------------- --------
-接下来，我们需要使用该函数来创建 DataLoader 对象。
----- - ---------- - - --------------------- ----- ---------- - --- ------------------ -- - ------ ------------------------------ --
DataLoader 的构造函数中包含一个获取数据的函数，该函数是一个参数函数，返回一个 Promise。在这个例子中，我们可以看到这个参数函数接收一个 userId 数组作为输入，然后在返回的批处理结果上解析值。当我们告诉 DataLoader 我们要加载的东西（在这种情况下是提供 user IDs）时，它将使用给定的批处理函数。
使用 DataLoader 获取数据
实际上，DataLoader 在等待批处理结果之前，不会执行任何操作。例如，如果我们调用它时传递一个单独的 userId，它不会通过批量加载而直接进行查询。下面是这个例子的代码：
-- --------- ---------------------------------- -- - ------------------ --
在这个例子中，PostLoader 的 load() 方法将获取 userId 作为单个参数并返回一个 Promise。如果传递多个userId，那么它们将被分组为一个 batchSize，并作为单个数组传递给我们之前定义的函数。一旦返回，DataLoader 将保证将批处理的元素按传入队列的顺序传给调用方的回调。
DataLoader 的缓存
DataLoader 内部存储有一个缓存，可以减少重复和不必要的请求，因此我们不需要在调用 load() 方法时担心重复请求。与缓存一起，DataLoader 还根据调用回调的顺序对批处理请求进行排序。这会确保我们对所有请求按顺序返回结果。
合理使用 DataLoader
虽然 DataLoader 可以帮助我们减少重复和不必要的请求，但如果我们不注意使用，那么效果并不显著。为了使用 DataLoader，我们应该遵循一些最佳实践：
- 在 DataLoader 构造函数中提供我们需要利用的获取函数
- 调用 load() 方法来获取这些数据
- 尽可能地将 load() 方法放在全局（在函数外部）调用，以便复用
- 将 DataLoader 作为依赖项注入其他组件，以便重用
- 对于每一个不同的数据查询，我们可以创建一个新的 DataLoader 对象，以避免数据查询受到其他查询的影响
结论
GraphQL 中的数据加载是一个昂贵的操作，这使得我们必须具备一些技能来减少查询的请求。DataLoader 就是一个非常好用的 JavaScript 模块，可以帮助我们有效地减少重复请求和不必要的操作。在本文中，我们介绍了 DataLoader，告诉你如何使用 DataLoader 以及如何合理地进行操作，以便在 GraphQL 中正确地处理数据加载问题。希望这篇文章能够帮助到你。'''
参考资料
- DataLoader
- Top 3 GraphQL Mistakes - Learn from my experience!
- DataLoader: Combining Batching with Caching
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f3aa76f40ec5a964e41612