6. 查询变量

当我们组织 GraphQL 查询语句时，会很自然地使用参数。同时也会很自然地硬编码它们。

{
  recentPosts(count: 10) {
    title
  }
}

比如说我们需要把 count 修改为 20。然后我们需要再次生成查询。这会增加 app 的维护成本。

使用这样的方法，我们无法在服务器端设置这些参数。通常在典型的应用中，userId 是必须在服务器端设置的参数。

但是幸运的是，GraphQL 有将值传给 query 更好的方式，而不是在 query 中硬编码它们。这就是 查询变量 的任务。

命名 queries

在之前的课程中，我们使用精简的语法定义 GraphQL queries。

{
  recentPosts(count: 10) {
    title
  }
}

但是这是写查询完整的语法:

query getFewPosts {
  recentPosts(count: 10) {
    title
  }
}

这里我们使用了 query 关键字，并命名了这个 query。你可以输入任意名字。相比完整的语法，在精简的版本中，我们简单地忽略了 query getFewPosts 部分。

我们需要使用 查询变量 来写具有完整语法的 queries。

使用 查询变量

比如我们需要对 count 参数使用 查询变量 。

query getFewPosts {
  recentPosts(count: 10) {
    title
  }
}

// 这么写
query getFewPosts($postCount: Int!) {
  recentPosts(count: $postCount) {
    title
  }
}

这里，我们定义了 Int 类型的 postCount 查询变量 。我们同时使用末尾的 ! 来表明它为必传变量。

我们需要使得 postCount 的 查询变量 必传，这是因为对于 recentPosts 参数而言， postCount 是必传参数。

如何输入 查询变量

你可能对如何提供 查询变量 有疑问。

我们通常在执行服务器查询的时候提供查询变量。我们先不用考虑它的实现原理，我们会在后面的课程讲到。

在GraphQL Sandbox中，我们有独立的 tab 来写查询变量。如下图:

现在你可以尝试着在GraphQL Sandbox中使用查询变量了，我们添加以下JSON到查询变量的tab中:

{
  "postCount": 2
}

简单的问题，如果你不给查询变量postCount赋值会发生什么？（从查询变量 tabs 中移除postCount字段）:

在查询语句的任意位置使用查询变量

一旦定义了查询变量，我们可以在 query 的任意位置使用它。这是我们在字段参数中使用它的例子:

query getFewPosts($postCount: Int!, $commentCount: Int) {
  recentPosts(count: $postCount) {
    title,
    comments(limit: $commentCount) {
      content
    }
  }
}

我们也能在 fragment 中使用它:

query getFewPosts($postCount: Int!, $commentCount: Int) {
  recentPosts(count: $postCount) {
    title,
    ...comments
  }
}

fragment comments on Post {
  comments(limit: $commentCount) {
    content
  }
}

你同样能在 Mutation 中使用它。

Input type

在 GraphQL Schema 中，会有不同的类型，其中包括内置类型（比如: init、string）和自定义类型（比如: Post、Author）。但是对于查询变量，我们不能全用。

我们仅能使用一部分类型，它们被称为 Input type。

通常 Input type 包括:

• Scalers such as Int, String, Float and Boolean
• Enums
• Arrays of the above types.

可以通过 GraphQL标准来了解更多的 Input type。

看一下这条query:

query getFewPosts($category: Category) {
  posts(category: $category) {
    title
  }
}

这里我们尝试通过 category 过滤文章，category 参数是 Category 的枚举值。博客中一些 category，PRODUCT是其中之一。所以你可以像这样定义查询变量:

{
  "category": "PRODUCT"
}

以下列表，哪种 category 是不存在的:

• METEOR
• OTHER
• USER_STORY
• GRAPHQL ✔️

最后

现在我们了解了查询变量，以及以不同的方式使用它。当你在客户端使用GraphQL时，查询变量会非常有用。