React Apollo 客户端多个突变

Posted 2023-03-08

【中文标题】React Apollo 客户端多个突变

【英文标题】：React Apollo client multiple mutations

【发布时间】：2021-09-03 02:52:48

【问题描述】：

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

再次感谢

【问题讨论】：

多个分离突变（批处理？）还是一个带有复杂参数的突变？ API 支持这个吗？在操场上测试过？

是的，谢谢 xadm。它被设置为单个突变，许多记录作为数组参数传递。我正在传递每条记录的 mongo id 和 week1、week2、week3、week4，因此 API 应该进行所有更新。它在操场上经过测试，效果很好。在 React 中，我有一个保存所有记录的状态变量。 OnChange 我可以使用 immer 更新记录的状态数组，但我也需要一个单独的用于 gql 变量的变量，并且努力使其工作。在更新变量和 Apollo 缓存时不断遇到问题。不断出现不提供任何信息的 index.js 错误。

详情！！ ... 显示测试突变（当然使用查询变量）、输入类型 defs 等。

这里似乎太长了，因为我提到 API 正在工作。如果你想亲眼看看。我很乐意分享。我的问题是在 React 部分使用功能组件并设置状态，为突变提供变量并发送它。状态是一个对象数组。到目前为止，更新每个单独的对象属性是一个挑战，并将其与数据字段绑定。

当然是更新问题

【参考方案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);
    )
  ;

【讨论】：

' 你甚至可以使用你在服务​​器上声明的输入类型' - 你应该使用在服务器上定义的类型:D ...如果不匹配类型，则不接受 arg