graphql 删除突变在操场上有效，但在前端无效

Question

我有一个 graphql 删除突变，它在 graphql 插件游乐场中与 Strapi 完美配合。 在 Vuejs 前端中，我无法通过突变读取要删除的项目的 id。

graphql Playground 中的查询是

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

前端显示是一个列表，带有删除每个项目的按钮

<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)
}

警报正确显示所点击项目的 id - 但 id 未通过突变

如何将点击的item的id传递给mutation？

Answer 1

变量对象必须包含键值对，其中键与声明的变量匹配。在您的情况下，您声明变量id，但在对象中您使用键invoiceID。重命名变量或键。

此外，调用变量id 可能会让您自己感到困惑，尽管它需要像上面这样的过滤器输入：{ where: { id: "id value" } }。最简单的方法可能是不从 JavaScript 传入对象，而是让您的查询采用 ID 类型的变量：

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

现在这让 mutch 更有意义了，因为 id 确实是一个 ID，而不是 deleteInvoiceInput。

把它们放在一起：

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 } });
}