反应 Apollo 客户端多次突变

问题描述

我有一个包含记录列表的数据表样式表，需要更新它们的值。我想运行一个 Submit 并在我的 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,“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);
    })
  };

再次感谢

解决方法

谢谢xadm， 现在已经解决了。并且无需使用 gqlast。只需确保在这些类型的查询中始终包含用于定义类型的顶部别名。它没有在任何地方指定，但您甚至可以使用您在服务器上声明的输入类型。然后确保您声明的 input: $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);
    })
  };