-1

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

graphql 游乐场中的查询是

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 未通过突变

如何将点击的项目的 id 传递给突变？

4

1 回答 1

0

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

此外，您可能会因为调用变量而感到困惑id，即使它需要像上面这样的过滤器输入{ where: { id: "id value" } }：最简单的方法可能是不从 JavaScript 传入对象，而是让您的查询采用 type 的变量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 } });
}
于 2021-11-17T15:04:46.853 回答