skip to Main Content

I am encountering an issue with graphQL in AWS. The error message suggests that I am entering invalid values for the input type. This confuses me because I am grabbing this item from a list. That list is generated by a "get list" query, that indeed comes from the very data set that I am trying to delete the item from. To my knowledge, there are no additions to the object that I am trying to delete.

I have reviewed some of the following to attempt to address this issue:

  1. I have checked to confirm that the shape of the object I am trying to remove, is exactly the same as it is defined when the original data item was defined for graphQl, and is the same as the delete note mutation I was provided by the code.
  2. I have reviewed this article in stackoverflow which seems to have a similar issue.
  3. I have reviewed a couple of different graphql sources that I have googled, but have not been able to turn anything up.

The code is invoked within an react class after a button is clicked. That body of code, can be found below. In addition to invoking the function that performs the deletion, it also removes the item from state after the deletion is invoked. This it does satisfactorily.

    deleteNote = (deletedNote) => {
  console.log('deletedNote variable in deleteNote function in app.js', deletedNote)
  removeNote(deletedNote)
  this.setState(prevState => {
    const indexOfNote = prevState.notes.findIndex(
      note => note.id === deletedNote.id 
    );
    let newNotesList = [...prevState.notes];
    if(indexOfNote >= 0) newNotesList.splice(indexOfNote, 1)
    return {notes: newNotesList} 
  })
}

That function invokes another function removeNote which is imported into the react file. That functions’ code is below:

async function removeNote(note){
console.log(note)

await client.graphql({
    query: deleteNoteMutation,
    variables: {input: {id}}
}).then(response => {
    console.log('Success! ', response)
}).catch(error => {
    console.log('Failure Response: ', error)
})}

Now after the first function is run, and the second function is invoked, the value is being passed into state, or the error is being thrown. The error that is being thrown is:

"The variables input contains a field that is not defined for input object type 'DeleteNoteInput' "

The mutation I was provided was:

    export const deleteNote = /* GraphQL */ `
  mutation DeleteNote(
    $input: DeleteNoteInput!
    $condition: ModelNoteConditionInput
  ) {
    deleteNote(input: $input, condition: $condition) {
      id
      name
      description
      createdAt
      updatedAt
      __typename
    }
  }
`;

the object as defined in the ‘schema.graphql’ file is:

    type Note @model @auth(rules: [ { allow: public } ] ){
  id: ID!
  name: String!
  description: String
}

The entire body of the code can be found here
the deployed functionality (with errors in the console log) can be found here

Any help that can be provided would be greatly appreciated.

2

Answers


  1. Chosen as BEST ANSWER

    Thank you Michael! For future reference, this is the exact solution I implemented that worked.

    async function removeNote(note){
    console.log(note)
    const noteId = note.id
    console.log('Note print in remove note', noteId)
    client.graphql({
        query: deleteNoteMutation,
        variables: {input: {id: noteId}}
    }).then(response => {
        console.log('Success! ', response)
    }).catch(error => {
        console.log('Failure Response: ', error)
    })}
    

  2. The error message is referring to the input of the mutation which is supposed to be of type DeleteNoteInput!

    This variable is being passed to your mutation as:

    variables: {input: {id}}
    

    But id is not defined in the scope of your removeNote function.

    Try:

    variables: {input: {id: note.id}}
    

    On a separate topic, you’re awaiting a promise but you’re also letting it resolve.

    await client.graphql({
        query: deleteNoteMutation,
        variables: {input: {id}}
    }).then(response => {
        console.log('Success! ', response)
    }).catch(error => {
        console.log('Failure Response: ', error)
    })}
    

    Can just be:

    client.graphql({
        query: deleteNoteMutation,
        variables: {input: {id}}
    }).then(response => {
        console.log('Success! ', response);
    }).catch(error => {
        console.log('Failure Response: ', error);
    })}
    

    or:

    try {
      response = await client.graphql({
        query: deleteNoteMutation,
        variables: {input: {id}}
      });
      console.log('Success! ', response);
    } catch(error) {
      console.log('Failure Response: ', error);
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search