GraphQL 是一种新兴的 API 查询语言，它允许开发人员在客户端和服务器之间进行高效的数据传输。GraphQL 使用类型系统来描述 API，因此使得前端和后端之间的沟通变得更加顺畅。
在 GraphQL 中，Directive 是一种重要的语言构建，它可以用于扩展和定制 GraphQL 的行为。Directive 可以修改 GraphQL 查询中的字段，使其具有不同的行为和功能。在该文章中，我们将会详细探讨如何在 GraphQL 中使用自定义 Directive 扩展功能。
Directive 的基础
Directive 是 GraphQL 中的一种语言构建，它被用来修改或扩展操作。Directive 以 @ 符号开头，紧随着 Directive 的名字和可选的参数列表。例如，在 GraphQL 中定义一个类似于下面的查询语句：
----- -
-------- --- -
----
----
-
-id 是一个参数，user 是一个字段。
如果你想要修改查询操作，例如仅返回 user 字段中的名称，那么可以在user字段上使用 directive：
----- -
-------- --- -
---- ------------ -----
-
-@include 是一个 Directive 的名字，它可以包含参数 if，该参数确定该字段是否应该被包含在查询结果中。本例中，由于参数 if 为 true，因此查询结果会包含 name 字段。
自定义 Directive
在 GraphQL 中，你可以创建自定义 Directive，用于在你的架构中扩展特定的功能。自定义 Directive 是由一个 Directive 名称、一个参数列表和作用于哪些查询语句构成的。Directive 有两个部分：一个 Directive 声明和一个 Directive 实现。
声明 Directive
声明 Directive 很简单，只需要使用 GraphQL Schema Definition Language （SDL）中的 directive 关键字。
--------- -------------- -- ----------------
此代码定义了一个名为 @myDirective 的 Directive。它不接受任何参数，并且可以适用于任何标量、对象或接口上的字段定义。 on FIELD_DEFINITION 表示该 Directive 可以应用于操作字段上。更多的应用场景可以查看Directive Apply Restrictions on Type System。
实现 Directive
在实现 Directive 之前，请确保你已经安装了 GraphQL JavaScript 环境以及具有 GraphQL 的 resolver 和 data source 的完整实现。
在实现 Directive 时，需要编写一个 GraphQL Resolver，该 Resolver 可根据 Directive 中的参数修改查询结果。
----- ------- - -- -- -
------ -
----- --------
----- --------
------ --------------------
--
--
----- --------- - -
------ -
----- --- - -- -- -- ------------
--
----- -
----- ------ -- ----------
----- ------ -- ----------
------ ------ -- -----------
--
-----------------------------
------------ ------ ------- - ----- ---- -- -- -
----- - ------- ---- - - -------
-- ----- -- --------- --- -------- -
------ -----
-
------ -------
--
--在上面的代码中，我们定义了一个名为 getUser 的函数，它模拟从数据库中获取用户详细信息。我们编写了 resolver 函数负责 Query 和 User 的数据源，同时在 User resolver 函数中保留了 name、role 和 email 字段。我们还在 resolvers 中添加了一个自定义 Directive MyDirective。
在自定义 MyDirective 中，我们可以接收查询中的参数并且根据自义定逻辑进行判断。其中的 next() 函数将执行默认 resolver，若 Directive 返回的值为空，则 Directive 的行为被禁用。
演示
现在，我们可以尝试使用自定义 Directive 并修改查询，来模拟具有访问授权的用户。
----- -
-------- --- -
---- ------------------ ----- ----- ------------
-
-在此代码中，我们添加了 @myDirective(arg1: true, arg2: "parameter") Directive， 它将确保返回的 name 字段只能由 admin 用户访问。由于 getUser 方法返回的 Role 是 admin，因此返回 name 字段的结果不会被Directive所禁用。
-
------- -
------- -
------- -------
-
-
-这样我们便顺利地在 GraphQL 中往查询中添加了自定义的 Directive 了。
结论
在 GraphQL 中使用自定义 Directive 扩展功能可以帮助前端工程师更好地实现特定的功能以及增强应用程序的灵活性。Directive 可以使 GraphQL 操作更具动态性，同时还可以帮助工程师构建更加高效的查询操作。
在编写自定义 Directive 时，请确保遵循 GraphQL Schema Definition Language（SDL）的标准，并尽可能地实现单个调用需求。至此，我们已经探讨了在 GraphQL 中使用自定义 Directive 的用途，希望本文章可以对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6736a5c20bc820c58255876e