The frontend cannot read my delete mutation using graphile api

Question

This is the frontend:

import DeleteFillupForm from 'src/api/graphile/mutations/deletesubmittedForms.graphql'
const mutation = useMutation(
async (id: number) => {
const response = await fetch('https://my-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: DeleteFillupForm,
    variables: { id },
  }),
});

const result = await response.json();

if (result.errors) {
  throw new Error(result.errors[0].message);
}
return result.data.deleteFillupForm.fillupForm;});




<Button
    aria-label="Delete Form"
    leftIcon={<BiDotsVerticalRounded />}
    mb="2"
    size="sm"
    colorScheme="red"
    w="full"
    onClick={handleDeleteForm}
  >
    Delete Form
  </Button>

This is the delete mutation

mutation DeleteFillupForm($id: BigInt!) {
deleteFillupForm(input: { id: $id }) {
fillupForm {
  id
  userId
  formId
}
}
}

When I compile the code it returns an error. The error is "Unexpected identifier 'DeleteFillupForm'.

Is the mutation is written correctly? or did I pass the data correctly?