Dans la méthode d'écriture de requête GraphQL présentée dans l'article précédent Vous vous demandez peut-être "Comment utiliser une variable dans une requête?"
Dans le cas de je Je voulais transmettre les données obtenues par l'API REST à l'API GraphQL Comment puis-je inclure des variables dans une requête? J'avais une question.
Ainsi, lorsque vous google "passez des variables à la requête GraphQL" __ Après tout, les articles faciles à comprendre ne frappent pas! __
Donc cette fois aussi, c'est facile à comprendre pour les débutants (même si je suis aussi un débutant ... Je vais vous expliquer comment utiliser les variables dans les requêtes GraphQL.
Cette fois, je vais vous expliquer en utilisant la requête suivante comme exemple.
query {
repositoryOwner(login:"nom d'utilisateur github") {
repositories(last:5){
nodes {
name
}
}
}
}
Si vous spécifiez le nom d'utilisateur de github, C'est une requête pour en obtenir 5 nouveaux depuis le référentiel de l'utilisateur spécifié.
Cependant, dans cet état, il ne s'agit pas d'une requête dynamique. Si vous écrivez le nom d'utilisateur directement dans la requête, vous ne pouvez obtenir que le référentiel de cet utilisateur.
Par exemple, si vous entrez le nom d'utilisateur de github, Lors de la création d'une application qui affiche les 5 derniers référentiels de cet utilisateur Cette requête ne peut pas être utilisée. Comment faire de cette requête une requête dynamique?
Pour faire de cette requête une requête dynamique Vous devez comprendre comment écrire la requête variables.
Lorsqu'elles sont traduites en japonais, les variables sont des variables. ~~ (Je ne peux pas dire que je l'ai remarqué lorsque j'ai cherché à écrire cet article, ou même si ma bouche s'est cassée) ~~
Ici, je vais expliquer la "méthode d'écriture" de ces variables. Si vous ajoutez des variables à la requête précédente et que vous la réécrivez, ce sera comme suit.
query ($user: String!) {
repositoryOwner(login:$user) {
repositories(last:5){
nodes {
name
}
}
}
}
--variables--
{
"user": "username"
}
Si vous comparez avant et après la réécriture, les première et deuxième lignes et les trois endroits sous les variables sont différentes.
Commençons par la première ligne
query ($user: String!) {
La description $ user: String! Est ajoutée après la requête. Il écrit des arguments, c'est-à-dire des arguments GraphQL et des types d'arguments. De plus, en écrivant "$" avant l'argument user, Les variables écrites en dehors de la requête peuvent être utilisées dans la requête comme arguments.
Puis la deuxième ligne
repositoryOwner(login:$user) {
Avant de réécrire, j'avais l'habitude d'écrire le nom d'utilisateur github directement dans la valeur de connexion. Je pense qu'il est devenu $ user. Cela prendra les données passées comme argument C'est une requête dynamique en la donnant comme valeur de login.
Enfin, la description ci-dessous les variables
{
"user": "username"
}
Avec GraphiQL, il y a un espace pour écrire des Variables sous l'éditeur de requête. Si vous l'écrivez ici, il sera combiné avec la description des première et deuxième lignes que j'ai expliquée plus tôt. Il sera disponible dans la requête en tant qu'utilisateur variable.
… C'est très bien pour savoir comment l'utiliser dans GraphiQL, C'est un peu différent lorsqu'il est utilisé dans les applications Rails.
C'est pourquoi il est écrit en Rails.
Cette fois, je vais vous expliquer sous forme d'ajout à l'application nouvellement créée avec échafaudage. Le formulaire rempli est "Entrez le nom d'un utilisateur github et il affichera les 5 derniers référentiels pour cet utilisateur." Créez quelque chose comme ça.
Après l'installation, ajoutez ce qui suit au contrôleur.
controllers/users_controller.rb
class UsersController < ApplicationController
...réduction...
Query = GqlTest(Votre propre nom d'application)::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
···réduction···
private
def result(variables = {})
response = GqlTest(* Votre propre nom d'application)::Client.query(Query, variables: variables)
end
end
Si vous expliquez le code ajouté La requête est Query = GqlTest (le nom de votre application) :: Client.parse << - GRAPHQL Ce n'est pas grave si vous écrivez la requête que vous avez créée plus tôt après le code dans.
controllers/users_controller.rb
Query = GqlTest(Votre propre nom d'application)::Client.parse <<-GRAPHQL
query ($user: String!) {
repositoryOwner(login: $user) {
repositories(last:5){
nodes {
name
}
}
}
}
Ce que j'ai ajouté dans l'action show Avec le code qui apporte le nom d'utilisateur enregistré dans la nouvelle action en tant que @ user.name et le stocke dans username Code qui récupère les données de résultat avec ce nom d'utilisateur comme argument. utilisateur: le nom d'utilisateur est Il est décrit dans l'espace Variables sous l'éditeur de requêtes de GraphiQL.
controllers/users_controller.rb
def show
username = @user.name
@works = result(user: username).data.repository_owner.repositories.nodes
end
Dans la méthode de résultat sous privé, j'ai ajouté ce qui suit. La différence avec l'article précédent est après la requête variables: variables Les variables peuvent être utilisées en décrivant. Une explication détaillée de cette partie peut être trouvée dans la référence officielle de graphql-client. Veuillez confirmer. (Référence officielle: https://github.com/github/graphql-client)
controllers/users_controller.rb
private
def result(variables = {})
response = GqlTest(* Votre propre nom d'application)::Client.query(Query, variables: variables)
end
end
Et enfin, il est complété en changeant show.html.erb de vue.
Ruby:views/show.html.erb
<% @works.each do |work|%>
<p><%= work.name %></p>
<% end %>
Veuillez ajouter le code ci-dessus à n'importe quel endroit que vous aimez dans show.html.erb créé par scaffold. Je pense qu'il sera affiché.
S'il peut être affiché comme ci-dessus, c'est terminé!
C'est tout, merci pour votre travail acharné!
(Depuis que j'ai griffonné cette fois en pleine nuit, il peut y avoir diverses erreurs typographiques ...)
Recommended Posts