使用 Apollo useMutation hook 传递变量答案

【问题标题】：Passing variables with Apollo useMutation hook使用 Apollo useMutation hook 传递变量
【发布时间】：2020-04-28 14:36:21
【问题描述】：

我正在使用useMutation 挂钩在我的应用程序中提交表单数据。我需要在组件的第一次渲染时传递未知的数据，所以我试图使用从useMutation 钩子返回的函数来传递一个复杂的对象。我正在关注 Apollo 文档 (https://www.apollographql.com/docs/react/data/mutations/) 中的示例，但我收到 400 网络错误，我认为这与我的变量未正确传递有关。当我对突变中的数据进行硬编码时，它可以工作。

component.js

const [sendLineItems, { loading, data, error }] = useMutation(CANCEL_LINE_ITEM);

export const structureCancelLineInput = (data) => {
  return {
    request: {
      requestId: '1234',
      orderLines: Object.values(data).map(line => ({
        cancelRequestQuantity: line.quantity,
        reasonCode: line.reason.code,
        reasonText: line.reason.text,
      }))
    }
  }
};

const handleSubmit = () => {
  const request = structureCancelLineInput(selectedLines);
  sendLineItems({ variables: request });
};

（selectedLines 来自这里的 React Context，从组件中的表单更新）

mutation.js

const CANCEL_LINE_ITEM = gql`
  mutation CancelLineItemMutation($request: CancelLineItemInputV1!) {
    cancelLineItem(input: $request) {
      id
      eta
      status
    }
  }
`;

架构

input CancelLineItemInputV1 {
    request: cancelLineItemRequest!
}

input cancelLineItemRequest {
    requestId: String,
    orderLines: [cancel_orderLines]
}

input cancel_orderLines {
    cancelRequestQuantity: Int!,
    reasonCode: String!,
    reasonText: String!,
}

是否存在我遗漏的语法或对象结构错误？

更新：

如果我查看初始错误对象，我会收到以下消息：

"Variable \"$request\" of required type \"CSOrderModsV1_CancelLineItemInputV1!\" was not provided."

我可能是错的，但我相信错误来自我试图传递自定义对象类型，因为它在它只需要一个字符串时确实有效。我找不到有人在前端传递自定义对象的示例，而且我不确定 POJO（不使用 TypeScript）将如何被输入，尤其是在后端定义的自定义类型。我也不知道如何在没有自定义对象的情况下传递数据。

【问题讨论】：

检查钩子返回的error对象，或者在开发工具中查看服务器的实际响应。服务器返回的errors 数组将包含有关您的请求有什么问题的详细信息。
@DanielRearden，这很有帮助，谢谢！我得到：未提供所需类型“CSOrderModsV1_CancelLineItemInputV1！”的“变量”。”
所以错误表明变量request根本没有被提供。看看你是如何传递它的。variables 参数应该是什么样子？
我可能是错的，但我相信错误来自我试图传递自定义对象类型，因为它在只需要一个字符串时确实有效。我找不到有人在前端传递自定义对象的示例，我不确定 POJO 将如何以这种方式输入，也不知道如何传递包含嵌套自定义对象的自定义对象作为其他任何东西.
发送{variables: request}和{variables: {request}}是有区别的

标签： reactjs graphql react-hooks apollo react-apollo

【解决方案1】：

这样做。它应该工作。如果您在 graphql 查询中注意到它需要 input 作为参数，所以 input 应该在 variable 对象中提及。

  const handleSubmit = () => {
  const request = structureCancelLineInput(selectedLines);
   sendLineItems({ variables: {input: request}});
 };

【讨论】：

不幸的是，它似乎并没有改变任何东西。它只是重命名另一端的变量
尝试 console.log 请求变量，看看它的结构是什么样的
还在开发工具下检查网络选项卡标题。您应该能够查看是否将任何变量传递给该突变