GraphQL 是一种用于 API 的查询语言，它是由 Facebook 开发的。它可以让客户端可控的查询需要的数据，避免了过多，不必要的数据传输。查询嵌套数据如果不加注意可能容易导致性能问题，所以使用 GraphQL 查询嵌套数据需要一些注意事项和最佳实践。
GraphQL 查询嵌套数据的问题
在使用 GraphQL 进行嵌套数据查询时，经常会出现重复请求的问题。嵌套查询中的某些属性，可能在多个地方被引用。当这些属性分别被引用时，可能会导致多次查询这些数据。对于大型应用程序，这种重复请求可能会导致性能问题。
最佳实践
1. 使用 Fragment 来避免重复请求
当我们需要查询相同的字段时，可以使用 Fragment 来避免重复请求。例如：
-- -------------------- ---- -------
-
-------- -- -
-------------
-----------
-
-
-------- -------- -- ---- -
-----
-------
-
-------- ---------- -- ---- -
------ -
----
-----
-
-上面的查询同时请求了文章的标题、内容，以及作者的姓名和电子邮件。我们使用 Fragment 来避免两次请求文章信息和作者信息。GraphQL 可以将这两个查询合并成一个查询。
2. 使用 DataLoader 避免重复请求
使用 DataLoader 来避免在同一次请求中重复查询数据。例如：
-- -------------------- ---- -------
----- ------------- - --- ---------------- ------ -- -
----- ------- - ----- ---------------------
-- --- ------- -----
----- ------ - ----------- -- -----
--- ---- ----- - -- ----- - ------------ -------- -
----- --- - -----------
----- ------ - -------------- -- ---- --- ----
-- -------- -
------------- - ------
-
-
------ ------
--
----- --------- - -
----- -
------- -------- ----- -------- ----- -- -
------ -------------------------------------------
-
-
-当在同一次请求中多次查询同一组作者信息时，DataLoader 将合并多次查询，并在一次数据库查询中返回所有结果。
3. 缓存查询结果
当我们从数据库中查询数据时，我们可以查看缓存是否已经有了我们正在寻找的数据，有的话直接从缓存中获取数据。这就避免了重复查询。
可以使用 FQL (GraphQL 的扩展) 扩展缓存查询：
{
cache(options: { key: "post_1" }){
author {
name
email
}
}
}在这个示例中，我们指定了查询作者信息，并将 options 对象传递给 cache 函数。如果缓存中有该键值，则返回结果；否则，查询数据库，并将结果在缓存中存储并返回。
结论
使用 GraphQL 查询嵌套数据需要遵循一些最佳实践，这些最佳实践可以帮助我们避免重复查询和提高性能。上面的三个实践是所有前端类使用 GraphQL 的基本要求，它们的实现也非常简单，可以帮助我们更好的完成 GraphQL 数据查询任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6751236c8bd460d3ad86e4de