在 React 前端开发中，我们通常需要从后端获取数据并将其呈现到用户界面上。GraphQL 是一种流行的查询语言，因为它允许我们根据具体需求获取精确的数据，而不是像 REST API 一样获取整个资源。
Relay 是一个强大的 GraphQL 客户端框架，它提供了一种简便的方式来管理应用程序中的 GraphQL 数据，并且可以轻松地将数据传递给组件。在这篇文章中，我们将学习如何使用 Relay Container 来绑定组件和 GraphQL 查询。
什么是 Relay Container？
Relay Container 是一个 React 组件，它负责从 GraphQL 查询中获取数据并将其传递到子组件中。它通过将组件与 GraphQL 查询相关联来实现数据绑定，以使组件能够及时更新自己的状态。
Relay Container 需要两个参数：graphql 查询和包含数据传递到组件的 props 的组件。当 graphql 查询返回数据时，Relay Container 将数据转换为 props 并将其传递给组件。
如何创建一个 Relay Container？
首先，我们需要定义一个 GraphQL 查询。例如，如果我们正在构建一个博客应用程序，并希望显示所有帖子的标题和正文，我们可以编写以下查询：
----- ----------------- -
-------- -
-----
-------
-
-接下来，我们需要定义一个包含组件的 props 的组件。在这个例子中，我们将创建一个名为 BlogPostList 的组件，它将接收一个名为 posts 的数组 prop：
-------- -------------- ----- -- -
------ -
----
----------------- -- -
--- --------------
---------------------
---------------------
-----
---
-----
--
-现在，我们可以使用 Relay Container 将这两个部分组合在一起。我们可以编写以下代码：
------ - -------- ----------------------- - ---- --------------
-------- -------------- ----- -- -
-- ---- -- ------
-
----- --------------------- - ------------------------------------- -
------ --------
-------- ------------------ -- ---- -------------- ----- -
--
-----
-------
-
--
---在这段代码中，我们导入了 graphql 和 createFragmentContainer 函数，并使用 createFragmentContainer 来创建一个新组件 BlogPostListContainer。第一个参数是我们之前定义的 BlogPostList 组件，第二个参数是包含数据传递到组件的 props 的 Fragments。
Fragments 是一种定义在 GraphQL 查询中的重复使用的组件结构。在上面的例子中，我们定义了一个 Fragment 名为 BlogPostList_posts，它定义了我们获取的每个 post 的属性：id，title和content。我们还使用了 @relay(plural: true)，这表示我们将获取一个多值属性。
如何使用 Relay Container？
现在我们已经创建了一个 Relay Container，我们可以使用它来获取数据并将其传递给我们的子组件。我们可以在任何需要显示博客文章列表的地方使用 BlogPostListContainer 组件，例如：
------ - -------- ------------- - ---- --------------
-------- ----- -
------ -
--------------
-------------------------
---------------
----- ----------------- -
-------- -
---------------------
-
-
--
---------- ------ ----- -- -- -
-- ------- -
------ -------------------
-
-- -------- -
------ ----------------------
-
------ ---------------------- ---------------------- ---
--
--
--
-在上面的代码中，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15643