React Apollo 客户端多个突变

Question

我有一个包含记录列表的数据表样式 table，需要更新它们的值。我想运行单个提交，并在我的 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 Client 工具正确显示变异变量为

tools showing

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

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

我尝试运行 JSON.parse(myVariables) 但没有帮助。阿波罗似乎转换了它。查询的最终结果不是运行。它 returns 一个 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: $input 匹配如下。这个特性是一个惊人的 GraphQL 特性，用一个单一的突变更新整个 table 网格。 REST API's 是不可能的。您还可以 return 更新后的结果，这意味着您无需再次进行重新获取。

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

React Apollo 客户端多个突变

React Apollo client multiple mutations

reactjs

mongodb

graphql

apollo-client

graphql-mutation