Query Variables

What is a variable in GraphQL context?

GraphQL has a first-class way to factor dynamic values out of the query, and pass them as a separate dictionary. These values are called variables. In our case, we are defining the object to be inserted as a mutation.

So let's define the graphql mutation to be used with variables.

Open src/components/TodoInput.vue and add the following code:

+ import gql from "graphql-tag";
+ const ADD_TODO = gql`
+ mutation insert_todos($todo: String!, $isPublic: Boolean!) {
+ insert_todos(objects: {title: $todo, is_public: $isPublic}) {
+ affected_rows
+ returning {
+ id
+ title
+ is_completed
+ created_at
+ is_public
+ }
+ }
+ }
+ `;
export default {
props: ['type'],
data() {
return {
newTodo: '',
methods: {
addTodo: function () {
// insert new todo into db

What does this mutation do?

The mutation inserts into todos table with the $todo and $isPublic variables being passed.

Awesome! We have defined our first graphql mutation.


Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.
Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Stay in the know
Sign up for full access to our community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule. ✌️