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/components/Todo/TodoInput.js and add the following code:

githubsrc/components/Todo/TodoInput.js
import React from 'react';
+ import { gql } from "@apollo/client";
+ const ADD_TODO = gql `
+ mutation ($todo: String!, $isPublic: Boolean!) {
+ insert_todos(objects: {title: $todo, is_public: $isPublic}) {
+ affected_rows
+ returning {
+ id
+ title
+ created_at
+ is_completed
+ }
+ }
+ }
+ `;
const TodoInput = ({isPublic=false}) => {
return (
<form className="formInput" onSubmit={(e) => {
e.preventDefault();
}}>
<input
className="input"
placeholder="What needs to be done?"
/>
<i className="inputMarker fa fa-angle-right" />
</form>
);
};
export default TodoInput;

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.

Close

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. โœŒ๏ธ