How to create a query using variables in GraphQL [Using Ruby on Rails]

Introduction

• This article is This is an additional content of the previous article "[Getting and displaying data from GraphQL API with Rails](https://qiita.com/hinokage/items/243b55477172317eb126" Qiia ")". I would appreciate it if you could read from the previous article (direct marketing).

In the GraphQL query writing method introduced in the previous article You may be wondering, "How can I use a variable in a query?"

In the case of I I wanted to pass the data obtained by REST API to GraphQL API How can I embed a variable in a query? I had a question.

So, when you google "pass variables to GraphQL query" __ After all, easy-to-understand articles do not hit! __

So this time too, it's easy to understand for beginners (although I'm also a beginner ... I will explain how to use variables in GraphQL queries.

Static query

This time, I will explain using the following query as an example.

query {
    repositoryOwner(login:"github username") {
        repositories(last:5){
            nodes {
                name
            }
        }
    }
}

If you specify a github user name, It is a query to get 5 new ones from the specified user's repository.

However, in this state, it is not a dynamic query. If you write the user name directly in the query, you can only get the repository for that user.

For example, if you enter your github username, When creating an app that displays the latest 5 of the user's repositories This query cannot be used. How can I make this query a dynamic query?

To make this query a dynamic query You need to understand how to write the query variables.

What are variables

Variables are variables when translated into Japanese. ~~ (I can't say that I noticed it when I searched to write this article

Here, I will explain the "writing method" of these variables. If you add variables to the previous query and rewrite it, it will be as follows.

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

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

If you compare before and after rewriting, the first and second lines and the three places below variables are different.

First, let ’s start with the first line.

query ($user: String!) {

The description $ user: String! Is added after the query. It writes Arguments, GraphQL arguments and argument types. Also, by writing "$" before the argument user, Variables written outside the query can be used inside the query as arguments.

Then the second line

repositoryOwner(login:$user) {

Before rewriting, I used to write the github user name directly in the login value. I think it has changed to $ user. This will take the data passed as an argument It is a dynamic query by giving it as the login value.

Finally, the description below variables

{
  "user": "username"
}

With GraphiQL, there is a space to write Variables under the query editor, so If you write it there, it will be combined with the description on the first and second lines that I explained earlier. It will be available in the query as the variable user.

… This is fine for how to use it in GraphiQL, It's a little different when used in Rails apps.

How to write Variables in Rails

That's why it's written in Rails.

This time, I will explain by adding to the newly created application with scaffold. The completed form is "Enter the name of a github user and it will display the 5 latest repositories for that user." Create something like that.

• The introduction part is omitted, but it is created according to the following flow. ① App creation (2) Generate the required model with scaffold (only user is generated this time) ④ Database related creation, migrate ③ Introduce and set graphql-client referring to the previous article

After installation, add the following to the controller.

controllers/users_controller.rb

class UsersController < ApplicationController
...abridgement...
  Query = GqlTest(Your own app name)::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

···abridgement···
  private
  def result(variables = {})
    response = GqlTest(* Your own app name)::Client.query(Query, variables: variables)
  end
end

If you explain the added code The query is Query = GqlTest (your app name) :: Client.parse <<-GRAPHQL It's OK if you write the query you created earlier after the code in.

controllers/users_controller.rb

Query = GqlTest(Your own app name)::Client.parse <<-GRAPHQL
  query ($user: String!) {
    repositoryOwner(login: $user) {
        repositories(last:5){
            nodes {
                name
            }
        }
    }
}

What I added in the show action With the code that brings the user name registered in the new action as @ user.name and stores it in username This is the code that retrieves the result data with that username as an argument. user: username is It is described in the Variables space under the query editor of GraphiQL.

controllers/users_controller.rb

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

In the result method under private, I added as follows. The difference from the previous article is after the query variables: variables Variables can be used by describing. A detailed explanation of this part can be found in the official reference of graphql-client. please confirm. (Official reference: https://github.com/github/graphql-client)

controllers/users_controller.rb

private
  def result(variables = {})
    response = GqlTest(* Your own app name)::Client.query(Query, variables: variables)
  end
end

And finally, it is completed by changing show.html.erb of view.

Ruby:views/show.html.erb

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

Please add the above code to any place you like in show.html.erb created by scaffold. I think it will be displayed.

If it can be displayed as above, it is complete!

That's all, thank you for your hard work!

(Since I scribbled it in the middle of the night, there may be various typographical errors ...)