GraphQL 是一个用于 API 的查询语言和运行时环境。与 REST 相比，GraphQL 具有更高效的数据获取、更少的网络请求和更好的类型检查。
在本篇文章中，我们将介绍如何从 GraphQL API 获取多层嵌套的数据。我们将以一个示例应用程序为例，演示如何使用 GraphQL 查询多层数据并将其展示在界面上。
什么是多层嵌套数据？
多层嵌套数据是指数据结构中存在嵌套的对象和数组。例如，在一个电影应用程序中，我们可能有一个电影对象，其中包含导演对象和演员数组。如果我们想要获取电影对象以及该电影的导演和演员信息，则需要执行多层嵌套数据查询。
使用 GraphQL 查询多层嵌套数据
在 GraphQL 中，我们可以使用嵌套查询语法来获取多层嵌套数据。例如，对于电影应用程序中的电影对象，我们可以使用以下查询语法：
-- -------------------- ---- -------
----- -
--------- ------ -
-----
-------- -
----
-
------ -
----
---------
-
-
-在这个查询中，我们首先查询电影对象，然后嵌套查询导演和演员信息。导演查询只包含了导演的姓名信息，而演员查询包含了演员的姓名和角色信息。
这个查询将返回一个包含电影、导演和演员信息的 JSON 对象。我们可以使用这个对象来展示电影信息。
在应用程序中展示多层嵌套数据
为了在应用程序中展示多层嵌套数据，我们需要将 GraphQL 查询结果转换为可以在界面上展示的格式。在 React 应用程序中，我们可以使用 React 组件来完成这个任务。
例如，在我们的电影应用程序中，我们可以创建一个名为 MovieDetails 的组件，使用以下代码展示电影嵌套数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- --- - ---- -----------------
----- ----------- - ----
---------- -------- -
--------- ---- -
-----
-------- -
----
-
------ -
----
---------
-
-
-
--
-------- -------------- -- -- -
----- - -------- ------ ---- - - --------------------- -
---------- - -- --
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
----- - ------ --------- ------ - - -----------
------ -
-----
----------------
------------- --------------------
----------------
----
----------------- -- -
--- -----------------
------------ -------------------
-----
---
-----
------
--
-
------ ------- -------------在这个示例中，我们使用 useQuery 钩子来执行 GraphQL 查询，并根据查询状态渲染不同的 UI。如果查询正在加载，我们展示 “Loading...” 文字，如果查询出现错误，我们展示 “Error :(” 文字。在查询成功后，我们从查询结果中提取电影、导演和演员信息，并在界面上展示它们。
结论
在本篇文章中，我们介绍了如何从 GraphQL API 获取多层嵌套的数据，并在应用程序中展示这些数据。我们使用了一个简单的电影应用程序作为示例，并演示了如何使用 GraphQL 查询语法和 React 组件来完成数据查询和展示。
GraphQL 是一个非常强大和灵活的 API 查询语言，它可以帮助我们更高效地获取和展示多层嵌套数据。如果你还没有尝试过 GraphQL，我强烈建议你学习一下它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677512716d66e0f9aaf37077