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:

githubsrc/components/TodoInput.vue
<script setup lang="ts">
import { ref } from "vue"
+ import { useMutation } from "@vue/apollo-composable"
+ import { INSERT_TODOS_ONE } from "../graphql-operations"
const { type } = defineProps({ type: String })
const newTodoTitle = ref("")
+ const insertTodoMutation = useMutation(INSERT_TODOS_ONE)
async function addTodo({ todoTitle, type }: { todoTitle: string; type: string }) {
// Code to add todo here
}
</script>

What does this mutation do?

The mutation inserts into todos table with the todo_insert_input variable being passed.

Awesome! We have defined our first graphql mutation.

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
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin