React Apollo 客户端多个突变

Question

我有一个包含记录列表的数据表样式表，需要更新它们的值。我想运行一个提交，并在我的 GraphQL 中将一组记录作为单个参数发送到集合查询。它们实际上是 MongoDB 文档。如标题所示，我将 React 与 Apollo 客户端一起使用。提前谢谢你:)

更多详情如下

所以我在服务器端有这个突变，它适用于 Playground。但是它会在 Apollo 客户端出现错误。

mutation { updateWorklogs( input: [ { id: "60c6b", week1: 1, week2: 2, week4: 9 }, { id: "60c6c", week1: 3, week2: 4, week4: 1.5 } ] ) { id year month name } }

Apollo 客户端工具将变异变量正确显示为

tools showing

但是在 Apollo 客户端工具中，当我尝试运行查询时，它显示为 {“输入”：[{“id”：“60c6b9ca277c815ec200992a”，“week1”：5，“week2”：2，“week3”：0，“week4”：9}，{“id”：“60c6ba80277c815ec200992e”，“ week1”:0,“week2”:5,“week3”:0,“week4”:0}]}

我想这很好。这应该可以工作，因为它与我在 Playground 中运行的相同，但不是！

我尝试运行 JSON.parse(myVariables) 但没有帮助。阿波罗似乎改变了它。最终结果查询没有运行。它返回 400 响应，仅此而已。如果我需要一个没有使用 TS 的接口，还不知道如何在 React JS 中实现。

const [setWorklog] = useMutation(SET_WORKLOGS);

const handleSubmit = (event) => {
    event.preventDefault();
    console.log("state=", state) // returns the above state, which is correct
    setWorklog({ variables: { input: state }, update(proxy, result) {
      const data = proxy.readQuery({
        query: GET_WORKLOGS
      })
      data.userWorklogs = result.data.setWorklogs;
      proxy.writeQuery({ query: GET_WORKLOGS, data });
    }}).then(
      console.log("returned=",data.updateWorklogs)
    )
    .catch(e => {
      console.log("Error=", e);
    })
  };

再次感谢

Answer 1

谢谢xadm， 现在解决了。并且不需要使用 gqlast。只需确保在这些类型的查询中始终包含用于定义类型的顶部别名。它没有在任何地方指定，但您甚至可以使用您在服务器上声明的输入类型。然后确保您声明的输入： $input 匹配如下。这个特性是一个了不起的 GraphQL 特性，用一个突变更新整个表格网格。使用 REST API 是不可能的。并且您可以返回更新后的结果，这意味着您不必再进行一次重新获取。

 mutation updateWorklogs(
    $input: [updateWorklogInput]
  ) {
    updateWorklogs(
      input: $input
    ) {
      id
      projectId
      name
      year
      month
      week1
      week2
      week3
      week4
      totalMonth
      totalProject
    }
  }

//Define
const [setWorklog] = useMutation(SET_WORKLOGS);

// Use it like this 
  const handleSubmit = (event) => {
    event.preventDefault();
    setWorklog({ variables: { input: input })
    .catch(e => {
      console.log("Error=", e);
    })
  };