Nuxt GraphQL mutation to Strapi 400 error

Discord Q&A frontend-questions
1

Hello!

Trying to submit forms via Nuxt to Strapi by using a GraphQL mutation.

This mutation in the GraphQL playground works:

mutation createFormSubmission ($data: FormSubmissionInput!) {
    createFormSubmission (data: $data) {
        data {
            attributes {
                  formName
                    firstName
                      lastName
                }
            }
        }
    }

With the query variables being:

{
  "data": {
    "formName": "test",
    "firstName": "John",
    "lastName": "Smith"
  }
}

In my create-submission.js file I have:

export const createSubmission = gql`
mutation createFormSubmission ($data: FormSubmissionInput!) {
    createFormSubmission (data: $data) {
        data {
            attributes {
                formName
                firstName
                  lastName
            }
        }
    }
 }
`

And in my form component I have:

<template>
    <h1>Test</h1>
    <button @click="mutate">Submit</button>
</template>
<script setup>
 import { createSubmission } from '~/queries/create-submission'

 const data = {
    "formName": "Test Form",
    "firstName": "John",
    "lastName": "Smith"
}

const { mutate } = useMutation(createSubmission, { data })

</script>

I’ve tried also manually submitting the data. I’m not sure what the deal is.

This topic has been created from a Discord post (1221154179574140998) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

What is the GQL response you’re are receiving from the server, or are you not receiving any?

3

<@692004665688064081> I forgot to update this post. I needed to pass data into the data const. So the data const needed to be

const data = {
  data: {
    formName: "Test Form",
    firstName: "John",
    lastName: "Smith"
  }
}
4

Bit messier than I would like but that works

5

Aah yeah that’s because of the REST api structure.

6

I guess, this way you can also upload images as they fall outside of the inner data object