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:

src/components/Todo/TodoInput.tsx

Copy

  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
      }}>
        <input
          className="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.