使用 Apollo 使用突变钩子传递变量

Question

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

组件.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，从组件中的表单更新(

突变.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(将如何类型化，尤其是在后端定义的自定义类型。 我也不知道如何在没有自定义对象的情况下传递数据。

Answer 1

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

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