Sign up for Hasura Newsletter

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.

Open src/GraphQLQueries.re and add the following code:

githubGraphQLQueries.re
// GraphQL mutation for inserting a todo
module InsertMyTodo = [%graphql
{|
mutation ($todo: String!, $isPublic: Boolean!) {
insert_todos(objects: {title: $todo, is_public: $isPublic}) {
affected_rows
returning {
id
title
created_at
is_completed
}
}
}
|}
];
module InsertMyTodoMutation = ReasonApollo.CreateMutation(InsertMyTodo);

In the above code,

  • InsertMyTodo is a mutation module built from plain query string using graphql_ppx.
  • InsertMyTodoMutation is a typed React component that provides the mutation function (a function that performs the given mutation) in its render prop function so that it can be utilised by the events. It is similar to the <Mutation> component in react-apollo.

What does this mutation do?

The mutation inserts into todos table with the objects variable being passed as one todo type.

Awesome! We have defined our first graphql mutation. In the next section, we will pass the query variables to this mutation and finally integrate this mutation with our insert todo functionality.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2021 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin