Graphql mutation returning a Post 400 Error, not sure how to resolve

Question

I attempting to use an input form in React to perform a graphql mutation and add a team to the database, which will result in a team card appearing on my React FrontEnd. I am able to perform mutation manually using GraphQL playground, but not sure how to use an input form to perform the same action. I have moved from functions to classes and back to functional components again and just cannot get this right..

Mutation.js File in resolvers

createTeam(parent, args, { prisma }, info) {
            
        return prisma.mutation.createTeam({ 
            data: {
                title: args.data.title,
                agegroup: args.data.agegroup,
                published: args.data.published,
                coachcreator: {
                    connect: {
                        id: userId
                    }
                }
            }
        }, info)
    },

Schema.graphql file

type Mutation {
    createTeam(data: CreateTeamInput!): Team!
} 

input CreateTeamInput {
    title: String!
    agegroup: String!
    published: Boolean!
}


type Team {
    id: ID!
    title: String!
    agegroup: String!
    published: Boolean!
    coachcreator: User!
    players: [Player!]!
    updatedAt: String!
    createdAt: String!
}

Form.jsx file

const ADD_TEAM = gql`
mutation AddTeam($title: String!, $agegroup: String!, $published: String!, $coachcreator: String!){
    createTeam(title: $title, agegroup: $agegroup, published: $published, coachcreator: $coachcreators,
    ){
        id
        title
        agegroup
        coachcreator {
            name
        }
    }
}
`


function AddTeamForm() {
  const [title, setTitle] = useState('')
  const [agegroup, setAgeGroup] = useState('')
  const [coachcreator, setCoachCreator] = useState('')
  const [createTeam, { error }] = useMutation(ADD_TEAM, {
    variables: { title, agegroup, coachcreator }, refetchQueries: ["GET_TEAMS"]
  })
  if (error) {
    console.log('error: ', error)
  }

  return (
    <div className="AddForm">

    <MDBRow>
      <MDBCol md="3">
        <MDBInput label="Title:" name="title" type="text" onChange={e => setTitle(e.target.value)}>
        </MDBInput>
      </MDBCol>
      
      <MDBCol md="3">
        <MDBInput label="Age Group:" name="agegroup" type="text" onChange={e => setAgeGroup(e.target.value)}>
        </MDBInput>
      </MDBCol>
      
      <MDBCol md="3">
        <MDBInput label="CoachCreator"  name="coachcreator" type="text" onChange={e => setCoachCreator(e.target.value)}>
        </MDBInput>
      </MDBCol>
    </MDBRow>

    <MDBBtn color="success" type="submit" onClick={createTeam}>
      Submit Form
    </MDBBtn>
</div>
    );
  }

  export default AddTeamForm

I am receiving a 400 bad request error and just cannot work out what the issue is. I've also researched Graphql and Apollo Docs for hours and still unsure of the solution.

Any ideas or a nudge in the right direction? Thanks.

Answer 1

Your schema 'claims' that createTeam mutation requires data argument (CreateTeamInput shaped):

type Mutation { createTeam(data: CreateTeamInput!): Team! }

In graphiql query variables probably looked like:

{
  data: {
    title: "some title", 
    agegroup: "some group", 
    published: "some date"
  }
}

... and you can't 'redefine` (on client) mutation (backend) requirements so define mutation 'in sync' with API shape:

const ADD_TEAM = gql`
  mutation AddTeam($data: CreateTeamInput!){
    createTeam(data: $data){
        id
        title
        agegroup
        coachcreator {
            name
        }
    }
  }
`

... and pass data object as variable, not separate values:

function AddTeamForm() {
  const [title, setTitle] = useState('')
  const [agegroup, setAgeGroup] = useState('')
  const [coachcreator, setCoachCreator] = useState('')
  const [createTeam, { error }] = useMutation(ADD_TEAM, {
    variables: { 
      data: {
        title, 
        agegroup, 
        published: "some date"
      }
    }, refetchQueries: ["GET_TEAMS"]
  })