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.tsx
and add the following code:
import * as React from 'react';+ import { gql } from "@apollo/client";+ 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+ }+ }+ }+ `;const TodoInput = ({isPublic=false}) => {const [todoInput, setTodoInput] = React.useState('');return (<form className="formInput" onSubmit={(e) => {e.preventDefault();// add todo}}><inputclassName="input"placeholder="What needs to be done?"value={todoInput}onChange={e => (setTodoInput(e.target.value))}/><i className="inputMarker fa fa-angle-right" /></form>);};export default TodoInput;
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.
Did you find this page helpful?
Start with GraphQL on Hasura for Free
Build apps and APIs 10x faster
Built-in authorization and caching
8x more performant than hand-rolled APIs

