前言
随着互联网的发展，Web 应用程序的开发变得越来越复杂和庞大，同时前端和后端的分离也越来越明显。在这样的背景下，GraphQL 和 Relay 的出现为 Web 应用程序的开发带来了全新的思路和方式。
GraphQL 是一种新型的 API 查询语言，与传统的 RESTful API 相比，GraphQL 具有更加灵活、高效、易扩展等优点。而 Relay 则是 Facebook 推出的一种前端框架，它与 GraphQL 配合使用可以让前端开发变得更加简单和高效。
在本文中，我们将介绍如何在 Rails 中使用 GraphQL 和 Relay 构建 Web 应用程序，从而实现前后端的分离，提高开发效率和代码质量。
GraphQL 的基本概念和语法
GraphQL 的核心思想是让客户端定义所需的数据结构，而不是由服务器返回固定的数据结构。客户端通过发送查询语句（Query）来获取所需的数据，服务器则根据查询语句返回对应的数据。
查询语句由字段和参数组成，字段表示要获取的数据，参数则用于过滤和排序。例如，下面是一个查询语句：
-- -------------------- ---- -------
-
-------- -- -
----
-----
------------ --- -
-----
-------
-
-
-该查询语句表示获取 id 为 1 的用户的姓名、邮箱以及他最近发布的 10 篇文章的标题和内容。
在 GraphQL 中，每个字段都有对应的类型，例如 String、Int、Boolean 等基本类型，以及自定义类型。自定义类型可以由多个字段组成，例如：
-- -------------------- ---- ------- ---- ---- - --- --- ----- ------- ------ ------- ------------ ----- -------- - ---- ---- - --- --- ------ ------- -------- ------- ------- ----- -
该代码定义了两个自定义类型 User 和 Post，User 包含 id、name、email 和 posts 四个字段，其中 posts 字段可以接受一个 limit 参数，表示最多返回多少篇文章。Post 包含 id、title、content 和 author 四个字段，其中 author 字段表示该文章的作者，类型为 User。
在 Rails 中使用 GraphQL
在 Rails 中使用 GraphQL 需要安装 graphql gem：
gem 'graphql'
然后在 config/routes.rb 中定义 GraphQL 的路由：
Rails.application.routes.draw do post "/graphql", to: "graphql#execute" end
接下来我们需要定义 GraphQL 的 schema，schema 定义了所有可用的查询和修改操作。在 Rails 中，可以使用 graphql-ruby gem 来定义 schema。
首先创建一个 app/graphql 目录，并在该目录下创建一个 schema.rb 文件：
class MyAppSchema < GraphQL::Schema query Types::QueryType end
该代码定义了一个 MyAppSchema 类，继承自 GraphQL::Schema，其中 query 方法指定了查询操作的类型为 Types::QueryType。
接下来需要定义 Types::QueryType 类，该类定义了所有可用的查询操作。例如：
-- -------------------- ---- -------
------ -----
----- --------- - -----------------
----- ------ ---------------- ----- ---- --
-------- ---- --- --------- ----
---
--- ---------
-------------
---
---
---该代码定义了一个 user 查询操作，接受一个参数 id，返回一个 Types::UserType 类型的对象，表示指定 id 的用户。在 user 方法中，我们可以使用 ActiveRecord 等 ORM 工具来查询数据库。
最后在 app/controllers/graphql_controller.rb 中定义 execute 方法：
-- -------------------- ---- -------
----- ----------------- - ---------------------
--- -------
------ - --------------------
---------------
---------- -------------------
-------- ---
--------------- ----------------------
-
------ ----- ------
---
---该代码定义了一个 execute 方法，接受客户端发送的查询语句和参数，调用 MyAppSchema.execute 方法执行查询，并返回结果。
至此，我们已经完成了在 Rails 中使用 GraphQL 的基本配置和定义。
使用 Relay
在使用 Relay 前，我们需要先定义 GraphQL 的 mutations。Mutation 是一种修改操作，例如创建、更新、删除等操作。在 Rails 中，可以使用 graphql-ruby gem 来定义 mutations。
首先在 app/graphql/mutations 目录下创建一个 mutations.rb 文件，定义 mutations：
-- -------------------- ---- -------
------ ---------
----- ---------- - ------------
-------- ------ ------- --------- ----
-------- ------- ------- --------- ----
----- ------ ---------------- ----- ----
----- -------- --------- ----- -----
--- -------------- -------
---- - -------------- ----- ------ ------
-- ---------
- ----- ----- ------- -- -
----
- ----- ---- ------- ------------------------- -
---
---
---
---该代码定义了一个 CreateUser 的 mutation，接受 name 和 email 两个参数，返回一个 Types::UserType 类型的对象和一个 errors 字符串数组。在 resolve 方法中，我们可以使用 ActiveRecord 等 ORM 工具来创建新的用户。
接下来在 app/graphql/types/mutation_type.rb 中定义 MutationType 类：
module Types
class MutationType < Types::BaseObject
field :create_user, mutation: Mutations::CreateUser
end
end该代码定义了一个 MutationType 类，继承自 Types::BaseObject，其中 field 方法定义了一个 create_user 的 mutation，类型为 Mutations::CreateUser。
接下来需要在 MyAppSchema 中指定 MutationType：
class MyAppSchema < GraphQL::Schema query Types::QueryType mutation Types::MutationType end
至此，我们已经完成了在 Rails 中使用 GraphQL 和定义 mutations 的基本配置和定义。
接下来就可以使用 Relay 来构建前端应用程序了。Relay 提供了一些基本的组件和工具，可以帮助我们快速地构建 Web 应用程序。
例如，下面是一个使用 Relay 的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- --------------
------ ------- ---- ---------------------------
------ ----------- ---- ----------------
----- ----- - --------
----- -------- -
------ -
--
----
-
-
--
-------- ----- -
------ -
--------------
-------------------------
-------------
---------- ------ ----- -- -- -
-- ------- -
------ ------------------
-
-- -------- -
------ ----------------------
-
------ ----------- ---------------------------
--
--
--
-
------ ------- ----该组件使用 QueryRenderer 组件来发送查询语句，接受 environment 和 query 两个参数，render 方法中根据查询结果渲染 UI。
总结
本文介绍了在 Rails 中使用 GraphQL 和 Relay 构建 Web 应用程序的基本思路和方式，包括 GraphQL 的基本概念和语法、在 Rails 中使用 GraphQL 的配置和定义、使用 Relay 的前端组件和工具等。希望本文能够对读者理解和应用 GraphQL 和 Relay 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6607d2c9d10417a22266ede3