GraphQL 是一种用于 API 的查询语言，它使得客户端能够精确地请求需要的数据。在 GraphQL Query 中使用变量，可以让我们更加灵活地构造查询，同时也提高了代码的可读性和可维护性。
什么是 GraphQL 变量
GraphQL 变量可以在查询中定义，用于传递参数。在 GraphQL Query 中，变量以 $ 开头，后面跟着变量名和变量类型。在查询中使用变量时，需要将变量名用 () 包裹起来，并在查询中使用 $ 加上变量名的方式引用变量。
如何在 GraphQL Query 中使用变量
在 GraphQL Query 中使用变量有三个步骤：
- 定义变量
在查询中定义变量，格式为 $variableName: variableType。例如：
---------- ---- -
-------- ---- -
----
-
-- 传递变量
在发送请求时，将变量传递给 GraphQL 服务器。例如：
- ----- ----- -
- 引用变量
在查询中引用变量，使用 $ 加上变量名的方式引用变量。例如：
---------- ---- -
-------- ---- -
----
-
-GraphQL 变量的类型
GraphQL 变量的类型可以是标量类型或自定义类型。标量类型包括 Int、Float、String、Boolean 和 ID。自定义类型指的是在 schema 中定义的自定义类型。
在定义变量时，需要指定变量的类型。例如：
---------- ---- ------ -------- ----- ----- ------- ----------- -
-------- ---- -
----
-
-GraphQL 变量的默认值
在定义变量时，可以指定变量的默认值。例如：
---------- -- - ------ -
-------- ---- -
----
-
-如果在请求中没有传递 $id 变量，GraphQL 服务器会使用默认值 "123"。
GraphQL 变量的指令
GraphQL 变量的指令可以用于在运行时修改查询的行为。常用的指令有 @include 和 @skip。
@include 指令用于在查询中包含或排除某些字段，例如：
------------------- --------- -
---- -
--
---- ------------ -------------
-
-如果 $includeName 的值为 true，则返回结果中包含 name 字段；如果 $includeName 的值为 false，则返回结果中不包含 name 字段。
@skip 指令用于跳过某些字段，例如：
---------------- --------- -
---- -
--
---- --------- ----------
-
-如果 $skipName 的值为 true，则返回结果中不包含 name 字段；如果 $skipName 的值为 false，则返回结果中包含 name 字段。
GraphQL 变量的示例代码
下面是一个使用 GraphQL 变量的示例代码：
---------- ---- -
-------- ---- -
----
---
-----
-
-在请求中，传递变量：
- ----- ----- -
返回结果：
-
------- -
------- -
------- --------
------ ---
-------- -------------------
-
-
-总结
在 GraphQL Query 中使用变量，可以让我们更加灵活地构造查询，同时也提高了代码的可读性和可维护性。在定义变量时，需要指定变量的类型和默认值。在查询中引用变量时，使用 $ 加上变量名的方式引用变量。GraphQL 变量的指令可以用于在运行时修改查询的行为。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66360f99d3423812e43d9f44