前言
GraphQL 是一个用于 API 开发的查询语言。GraphQL 使得客户端可以准确地声明需要的数据，从而避免了传统 REST 架构中出现的多次请求和响应，这样可以有效地减轻服务器端的负担。
GraphQL 客户端在面临后端多个 GraphQL API 时，可以通过 @graphql-tools/load 包来统一加载和管理不同的 API。本文将为大家介绍如何使用 @graphql-tools/load 包。
安装
使用 npm 安装 @graphql-tools/load
npm install @graphql-tools/load
使用
在项目的入口文件中导入 @graphql-tools/load 包
const { loadSchema } = require('@graphql-tools/load');1. 从 URL 中加载 schema
从 URL 加载 schema，需要传递正确的 URL 地址，并需要提供加载器，这里我们使用 urlLoader 来加载 schema 文件。
const { UrlLoader } = require('@graphql-tools/url-loader');
const schema = await loadSchema('https://swapi-graphql.netlify.app/.netlify/functions/index', {
loaders: [
new UrlLoader(),
],
});2. 从本地目录中加载 schema
从本地目录中加载 schema，需要传递正确的本地目录，并需要提供加载器，这里我们使用 loadTypedefs 来加载 schema 文件。
const { loadTypedefs } = require('@graphql-tools/load');
const { GraphQLFileLoader } = require('@graphql-tools/graphql-file-loader');
const schema = await loadTypedefs('./schema/schema.graphql', {
loaders: [new GraphQLFileLoader()]
});3. 使用 CSS selector 加载 schema
如果我们使用的是 .graphql 文件来存储 schema，那么可以通过 CSS selector 来匹配需要的 schema 字符串。
const { DocumentNode } = require('graphql');
const { loadSchema } = require('@graphql-tools/load');
const { GraphQLFileLoader } = require('@graphql-tools/graphql-file-loader');
const schema = await loadSchema('./schema/**.graphql', {
loaders: [new GraphQLFileLoader()],
filterKinds: ['ObjectTypeDefinition'],
});在上面的配置中，filterKinds 仅选择了 ObjectTypeDefinition 字段类型。
4. 使用 remote schema 加载器
我们还可以使用 remoteLoader 来加载远程 schema。可以使用此功能将多个 GraphQL API 组合在一起。
-- -------------------- ---- -------
----- - ---------- - - -------------------------------
----- - -------------------- - - ---------------------------------
----- - ----------------- - - ----------------------------------------------
----- - ----------------- - - -------------------
----- - ----------------------- - - ---------------------------
----- ---------------- ------- ----------------------- -
----- ----------------- -------- ------- -- -
-- ----------------------- -
----------------------------------------- -----------------------
-
-
-
----- ------ - ----- ------------
-------- ---- ---------------------
---------- -
------ -
-- ---
--
--
------------------- -
------------ -----
--
---- -
-
----- --------
--------------- ------- -- --
-----------
-------------- -------------------------
---
--
--
------------- ----- -- -------- ---------- -- -- -
-- -------- --- -------------------------------- -
------ ------------------- -
-------- ---- ---------------------
-----------
---
-
--
----------------- ----- -- ------- ---------- -- -- -
------ ----------------------
------- --------------------------
---------- -
------ -
-- ---
--
--
---
--
-------------- -
------------ -----------------
--
------------ -
------ --- ---------------- -------- --- ---
--
----- -----
---------------- ------
------------------ -----
-------------- ------
------------------- ------
----------------- ---
------- -----
---在上面的配置中，我们使用了 RemoteGraphQLDataSource 来加载远程的 API。
结语
本文介绍了如何使用 @graphql-tools/load 包来管理多个 GraphQL API 并通过加载器统一加载 schema。希望能对您在前端开发中使用 GraphQL 时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf0fb5cbfe1ea0610f84