petite-vue version

form.js

import { createApp } from "https://unpkg.com/petite-vue?module";
const query = `mutation saveContactForm($firstName: String, $lastName: String, $company: String, $phoneNumber: String, $email: String, $message: String, $authorId: ID) {
  save_submissions_contactForm_Entry(firstName: $firstName, lastName: $lastName, company: $company, phoneNumber: $phoneNumber, email: $email, message: $message authorId: $authorId) {
    firstName
    lastName
    company
    phoneNumber
    email
    message
 }
}`

const payload = (formData) => {
    return {
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${window.graphqlToken}`
        },
        body: JSON.stringify(
            {
                query: `${query}`,
                variables: {
                    firstName: formData.firstName,
                    lastName: formData.lastName,
                    company: formData.company,
                    phoneNumber: formData.phoneNumber,
                    email: formData.email,
                    message: formData.message,
                    authorId: 1
                }

            }
        )
    }
}

const fields = () => {
    return {
        firstName: '',
        lastName: '',
        company: '',
        email: '',
        phoneNumber: '',
        message: ''
    }
}

createApp({
    fields: fields(),
    processing: false,
    submitted: false,
    errors: false,
    processForm() {
        console.log(this.fields)
        this.processing = true
        fetch(window.graphqlEndpoint, payload(this.fields))
            .then(response => response.json())
            .then(response => {
                this.processing = false
                if(response.errors) {
                    this.errors = true
                } else {
                    this.fields = fields()
                    this.submitted = true
                }
            })
            .catch(error => {
                console.log(error)
                this.processing = false
                this.errors = true
            })
    }
}).mount()