graphql delete mutation works in the playground but not in the frontend

Question

I have a graphql delete mutation that works perfectly with Strapi in the graphql plugin playground. In a Vuejs frontend I cannot get the mutation to read the id of the item to delete.

The query in the graphql playground is

mutation deleteInvoice ($id: deleteInvoiceInput!) {
  deleteInvoice(input: $id) {
    invoice {
      id
    }
  }
}
Query variables
{ "id": "618bacab6a2a1b2f7407a8e8" }

The frontend display is a list with button to delete each item

<tr v-for="(item, id) in result.invoices" :key="id" id="delete-item">
  <td>{{ item.id }}</td>
  <button @click="onDeleteClicked(item)"  uk-icon="icon: trash"></button>
</td>

const { mutate: deleteInvoice } = useMutation(gql`
  mutation deleteInvoice($id: ID!) {
    deleteInvoice(input: { where: { id: $id } }) {
      invoice {
        id
      }    
    }
  }`, 
  (id) => ({
    variables: { id }
  })
)
const onDeleteClicked = (item) => {
deleteInvoice({ variables: { item: item.id} })
  alert(item.id)
}

the alert displays correctly the id of the item clicked - but the id is not passed the mutation

how to pass the id of the item clicked to the mutation?

Herku · Answer 1 · 2021-11-17T17:36:02.400

The variables object must contain key value pairs where the key matches a declared variable. In your case you declare the variable id but in the object you use the key invoiceID. Either rename the variable or the key.

Furthermore, you are probably confusing yourself by calling the variable id, even though it expects a filter input like above: { where: { id: "id value" } }. The easiest way is probably to not pass in the object from JavaScript, but make your query take a variable of type ID:

mutation deleteInvoice ($id: ID!) {
  deleteInvoice(input: { where: { id: $id } }) {
    invoice {
      id
    }
  }
}

Now this makes mutch more sense as id is really an ID and not a deleteInvoiceInput.

Bringing it all together:

const [deleteInvoice] = useMutation(gql`
  mutation deleteInvoice($id: ID!) {
    deleteInvoice(input: { where: { id: $id } }) {
      invoice {
        id
      }    
    }
  }
`)

// Usually in callback
const onDeleteClicked = (event) => {
  const id = event.currentTarget.getAttribute('data-id');
  deleteInvoice({ variables: { id } });
}

Hmm, yeah it looks like a hook but the question is tagged with `vue-apollo` AND `apollo-boost`. I will edit to the actual mutation interface. — Herku, Nov 17 '21 at 17:32
tried your suggestion but still not able to pass the id to the mutation - updated the process based the suggestions — Gosmith, Dec 18 '21 at 22:00

graphql delete mutation works in the playground but not in the frontend

1 Answers1