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