随着微服务架构的流行，前端开发中也出现了同样的问题：多个服务提供的数据无法直接互通。GraphQL是一种解决方案，但当数据源变得更加复杂时，使用GraphQL的一个问题是如何组合多个数据源。
本文将介绍Schema Stitching的使用，它是一种GraphQL schema组合技术，可以将多个子schema组合成一个整体，从而消除了微服务间数据瓶颈的问题。
Schema Stitching的定义
Schema Stitching是一种构建GraphQL服务的方法，允许多个GraphQL服务合并成一个整体。每个子服务提供一个成功的GraphQL schema，然后通过将它们缝合在一起构建新的GraphQL schema，从而为客户端提供一个单一的入口点。
Schema Stitching的原理
Schema Stitching将两个或更多子schema组合成一个逻辑的父schema，允许客户端在单个请求中进行多个查询。使用Schema Stitching，您可以：
- 将现有的GraphQL schema组合到一个schema中。
- 根据不同的规则将多个schema合并到一个schema中。
- 混合使用remote schema和本地schema。
在Schema Stitching中，父schema充当了一个“代理”，将数据查询转发到不同的子schema中。这个过程的实现可以通过GraphQL的mergeSchemas功能完成。
如何使用Schema Stitching
第一步：创建子schema
首先，需要创建一个或多个子schema。子schema是由GraphQL schema定义的服务。
下面是一个简单的Schema，它定义了一个查询，可以从REST API获取film信息：
type Film {
id: ID!
title: String!
}
type Query {
film(id: ID!): Film!
}第二步：将子schema转换成可复用的“Remote Schema”
在应用程序中使用远程schema时，不能直接访问子schema。为了能够访问和使用多个子schema，您需要将它们封装在一个标准格式的Remote Schema中。
这里展示一个转换restful接口的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------------------
------ -
---------------
--------------
---------------
---------------------
- ---- ----------------
----- ------ - -
------ -
---------- ----- -------- ----- -
----- --------- - ---------------
----- --- - --------------------------------------
------ ---------------------
-------------- -------------- -- -
----- --------- - ----------------------
----- ----- - ---------------------------------
----- --------- - --------------------
------ ---------------- - ------- ----- ----------- -- ------------
---
-
-
--
----- ------ - ----------------------
---------- --------------------------
--------- ------------------------
---
------ ------- -------第三步：将Remote Schema合并为单个schema
最后一步是将所有的Remote Schema合并到一个单独的schema对象中。这个过程可以使用GraphQL的mergeSchemas功能完成。有了这个函数，将远程/本地schema合并就变得像这样：
import { mergeSchemas } from '@graphql-tools/merge';
const combinedSchema = mergeSchemas({
schemas: [remoteSchema1, remoteSchema2, localSchema1, localSchema2]
});第四步：查询新schema
现在可以像使用一个schema对象一样使用新的combinedSchema对象了。
Schema Stitching示例代码
-- -------------------- ---- -------
- - -------
---- -------- -
--- ---
----- -------
----- -------
-
---- ----- -
------------------- ----- ---------
-
- - -------
---- ----- -
--- ---
------ -------
---------- -----------
------- --------
-
---- ----- -
--- ---
----- -------
-
---- ----- -
---------------- ----- ------
---------------- ----- ------
-
- ------ ------
------ - --------- - ---- ----------------------------
------ -
---------------
--------------
---------------
---------------------
- ---- ----------------
----- ------ - ----------------------
----------
---------
---
----- -------- -------------------------- -
----- -------- - ----- ---------------- -
------- ------
-------- -
------- -------------------
--------------- -------------------
--
---
----- ------------ - ----- ----------------
------ --------------------------
-
- --
------ - ------------ - ---- -----------------------
----- ------------ - --------------
----------- -
-
------- -------------
--
-
------- -----------
-- - ---------- -----------------------------------------------
----------- -
--- ---------------------------- ----- -- --------------------
--- ---------------------------------- ---------- ---------- -- -
-- --------- --- -------- -
----- ------------ - --------- --- ---------- - --------- - ------------------------
------ ------------------------------- --------------
-
---
--
--
-
------- -----------
-- - ---------- ---------------------------------------------
----------- -
--- ---------------------------- ----- -- -----------------
--- -------------------------------- ---------- ---------- -- -
-- --------- --- ------- -- ---------------------------------------- -
----- ------- - ---------------------------
------ ----------------------------- ---------
-
---
--
--
--
---结论
Schema Stitching技术使得前端开发者将多个微服务合并成一个整体的GraphQL schema，从而方便了前端同学的开发和使用。但在具体应用时，开发者需要考虑好每个服务查询之间的关系，以及Schema映射规则等问题。只有规划好了这些问题，Schema Stitching技术才能发挥出它的优势，为前端开发者们带来更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3bc37f40ec5a964e49a2d