Why do I get a 400 error in the graphql mutation?

I am trying to create new objects in Strapi using the frontend. Why does my mutation not work? I get following message: "POST http://localhost:1337/graphql 400 (Bad Request) Error: Network error: Response not successful: Received status code 400"

How can I create new entries in Strapi with graphql mutation?

<template>
  <form @submit.prevent="saveDancegroup">
    <AppControlInput v-model="groupname">Name</AppControlInput>
    <AppControlInput v-model="school">Tanzschule</AppControlInput>
    <AppButton type="submit">Speichern</AppButton>
    <AppButton
    type="button"
    style="margin-left: 10px"
    btn-style="cancel"
    @click="onCancel()">Cancel</AppButton>
  </form>
</template>

<script>

import AppControlInput from '~/components/UI/AppControlInput'
import AppButton from '~/components/UI/AppButton'

import gql from 'graphql-tag'


export default {
  components: {
    AppControlInput,
    AppButton
  },
  data() {
    return {
      groupname: '',
      school: ''
    }
  },
  methods: {
    saveDancegroup() {

      this.$apollo.mutate ({
        mutation: gql`
        mutation {
          createDancegroup(
            input: { data: { groupname: $groupname, school: $school } }
          ) {
            dancegroup {
              groupname
              school
            }
          }
        }`,
        variables: {
          groupname: this.groupname,
          school: this.school
        }

      })

    }
  },
  onCancel() {
    // Navigate back
    this.$router.push('/admin');
  }
}
</script>