首先

※本篇文章是前文”使用Rails从GraphQL API中获取和显示数据”的补充内容。如果您愿意的话，我很感激您从上一篇文章开始阅读。（直接营销）

我认为在上一篇文章中介绍的GraphQL查询的编写方式中，一定有人会对“如何在查询中使用变量？”这个问题产生疑问。

我想将通过REST API获取的数据传递给GraphQL API，所以我想知道如何将变量嵌入查询中。

当我搜索“如何在GraphQL查询中传递变量”时，似乎找不到简单易懂的文章。

所以这次我将简单地解释如何在GraphQL查询中使用变量，特别是针对初学者（虽然我自己也是初学者）。

静态查询

这次我会以以下的查询作为例子来进行说明。

query {
    repositoryOwner(login:"githubユーザー名") {
        repositories(last:5){
            nodes {
                name
            }
        }
    }
}

当您指定GitHub用户名时，该查询将从指定用户的存储库中获取最新的五个项目。

然而，如果处于这种状态，那就不是动态查询了。
如果直接将用户名写入查询中，那只能获取到该用户的存储库。

如果要创建一个应用程序，例如当您输入GitHub用户名时，会显示该用户的最新5个仓库，那么这个查询将无法满足要求。您应该如何将这个查询转换为动态查询呢？

要将这个查询转换为动态查询，就需要理解变量作为查询的写法。

“变量”是什么意思？

variables在日语中被翻译为“变量”。

在这里，我想要解释一下这个变量的“写法”。
如果我们在之前的查询中添加变量并进行重新书写，结果如下所示。

query ($user: String!) {
    repositoryOwner(login:$user) {
        repositories(last:5){
            nodes {
                name
            }
        }
    }
}

--variables--
{
  "user": "username"
}

当我们将在重写前后进行比较时，可以发现第一行、第二行和下面的变量有所不同。

首先从第一行开始解释

query ($user: String!) {

在查询后添加了$user: String!的描述，这表示Arguments，也就是写下了GraphQL的参数和参数类型。同样，在参数user之前加上”$”符号，将在查询内部使用在查询外部编写的变量作为参数。

接下来是第二行。

repositoryOwner(login:$user) {

在进行重写之前，直接将GitHub的用户名写入登录值，改为使用$user变量。通过将传递的数据作为参数提供给登录值，将其变为动态查询。

最后是关于variables以下的描述。

{
  "user": "username"
}

在GraphiQL中，查询编辑器下面有一个变量的写入空间，因此只需在那里写入，并结合之前提到的第一行和第二行的描述，就可以在查询中使用变量”user”。

…在GraphiQL中的使用方法可以这样，但在Rails应用中使用则有些不同。

在Rails中如何编写变量

这就是在Rails中的写法。

本次我们将在新建的应用程序上添加内容来作为解释。
我们将创建一个完成形态为“输入GitHub用户名，显示该用户最新的5个仓库”的应用程序。

※省略導入部分，以下是制作过程。
1. 创建应用程序。
2. 使用脚手架生成所需的模型（本次仅创建用户模型）。
3. 创建数据库相关内容，并进行迁移。
4. 参考上一篇文章，引入和配置graphql-client。

如果我们可以进行导入，那么就在控制器中添加以下内容。

class UsersController < ApplicationController
...省略...
  Query = GqlTest(ご自身のアプリ名)::Client.parse <<-GRAPHQL
  query ($user: String!) {
    repositoryOwner(login: $user) {
        repositories(last:5){
            nodes {
                name
            }
        }
    }
}
    GRAPHQL

  def show
    username = @user.name
    @works = result(user: username).data.repository_owner.repositories.nodes
  end

・・・省略・・・
  private
  def result(variables = {})
    response = GqlTest(※ご自身のアプリ名)::Client.query(Query, variables: variables)
  end
end

解释刚才补充的代码如下：
查询是在以下代码之后添加刚刚创建的查询即可：
Query = GqlTest（您的应用程序名称）：：Client.parse <<-GRAPHQL

Query = GqlTest(ご自身のアプリ名)::Client.parse <<-GRAPHQL
  query ($user: String!) {
    repositoryOwner(login: $user) {
        repositories(last:5){
            nodes {
                name
            }
        }
    }
}

在show操作中添加的代码是将以new操作注册的用户名通过@user.name获取并存储到username变量中的代码，以及使用username作为参数提取结果数据的代码。
用户：username是在GraphiQL查询编辑器下的变量空间中编写的。

def show
    username = @user.name
    @works = result(user: username).data.repository_owner.repositories.nodes
end

在private下的result方法中，我们添加了以下内容。
与上一篇文章不同之处在于，在query后面加上了
variables：variables
的描述，以便能够使用variables。
关于这部分的详细说明请参考graphql-client的官方参考资料。
(官方参考资料：https://github.com/github/graphql-client）

private
  def result(variables = {})
    response = GqlTest(※ご自身のアプリ名)::Client.query(Query, variables: variables)
  end
end

然后，在 show.html.erb 视图中进行更改，完成了。

<% @works.each do |work|%>
   <p><%= work.name %></p>
<% end %>

只需将上述代码添加到您喜欢的位置，即可在使用scaffold创建的show.html.erb文件中进行显示。

如果可以像上面那样显示，就完成了！

以上了，辛苦了！

由于今晚也是在半夜赶写的，所以可能会有一些错字或漏字…