GraphQL quick tip: How to pass variables in GraphiQL

David Mráz
Aug 27, 2017 · 2 min read

This article is also available at https://atheros.ai/blog/graphql-quick-tip-how-to-pass-variables-in-graphiql without the paywall.

Introduction

In the previous article input object type as an argument for GraphQL mutations, we used GraphiQL for executing queries and mutations. We mentioned the following different forms of passing an argument into a mutation

  • Using inline arguments
  • Using variables

Now let’s discuss how we can perform query executions using inline arguments and variables in GraphiQL as we did not mention that in previous articles. First, just clone this repository and switch to the corresponding branch to test our example mutation

The process of designing mutations is described in the article on GraphQL mutations. We will use the same example of a mutation, nevertheless, in this quick blog post, we will focus only on our options for executing mutations and queries in GraphiQL.

Inline arguments in GraphiQL

First we can use inline arguments. The mutation execution string is then written as follows and there are no other requirements for executing mutation written in this format

mutation for creating user with inline arguments

Variables in GraphiQL

With the variables is a little bit more complex we have to split the query string into two separate parts. Our selection set includes id, username, email, phone, firstName and lastName like in the query string with inline arguments

mutation for creating user with variables

If we would like to use the variables in GraphiQL just click on the QUERY VARIABLES panel at the bottom of your screen and pass the following code

example of JSON with variables

Variables should be written using the JSON format. Therefore if you add for example a comma at the end of the last attribute, the GraphiQL invalidates the object with the variables.

The overview of your setup can be viewed like this

I use passing variables using GraphQL playground all the time. We can easily copy and paste the code to our *.graphql files and instantly know that we are building them correctly. The only problem to think about is that we have to debug our input variable to be in a format which can be validated by our GraphQL schema.

This article was originally published at https://atheros.ai/blog/graphql-quick-tip-how-to-pass-variables-in-graphiql

Did you like this post? The repository with the examples and project set-up can be found in this git repository. Feel free to send any questions about the topic to david@atheros.ai .

Atheros

Everything you need to know about building AI products.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store