Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 用Apollo钩子传递变量_Reactjs_Graphql_React Hooks_Apollo_React Apollo - Fatal编程技术网

Reactjs 用Apollo钩子传递变量

Reactjs 用Apollo钩子传递变量,reactjs,graphql,react-hooks,apollo,react-apollo,Reactjs,Graphql,React Hooks,Apollo,React Apollo,我正在使用UseHook在我的应用程序中提交表单数据。我需要传递在组件的第一次呈现时未知的数据,因此我尝试使用从UseStation钩子返回的函数来传递复杂对象。我遵循Apollo文档()中的示例,但我得到了一个400网络错误,我认为这与我的变量传递不正确有关。当我硬编码变异中的数据时,它起作用了 component.js const [sendLineItems, { loading, data, error }] = useMutation(CANCEL_LINE_ITEM); e

我正在使用UseHook在我的应用程序中提交表单数据。我需要传递在组件的第一次呈现时未知的数据,因此我尝试使用从UseStation钩子返回的函数来传递复杂对象。我遵循Apollo文档()中的示例,但我得到了一个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上下文,从组件中的表单更新)

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)将如何类型化,特别是在后端定义的自定义类型。我也不知道如何在没有自定义对象的情况下传递数据。

这样做。它应该会起作用。如果您注意到在graphql查询中,它将
输入
作为参数,因此
输入
应该在
变量
对象中提及

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

检查钩子返回的
错误
对象,或者在dev工具中查看服务器的实际响应。服务器返回的
errors
数组将包含有关您的请求有什么问题的详细信息。@DanielRearden,这很有帮助,谢谢!我得到了“变量\“$request\”的必需类型\“CSOrderModsV1\u cancellineitemputv1!”\“未提供。”因此,该错误表明变量
请求
根本未提供。看看你是怎么把它传进来的。
variables
参数应该是什么样子的?我可能错了,但我相信错误来自于我试图传递一个自定义对象类型,因为它只需要一个字符串就可以工作。我找不到有人在前端传递自定义对象的例子,我也不确定POJO是如何以这种方式键入的,我也不知道如何将包含嵌套自定义对象的自定义对象作为任何其他对象传递。发送
{variables:request}
{variables:{request}之间有区别
不幸的是,它似乎没有改变任何事情。它只是重命名了另一端的变量try to console.log请求变量,并查看其结构如何。在Dev tools check network选项卡标题下也是如此。你应该能够看到你是否传递了任何变量给那个变异