Передача переменных с помощью Apollo

Question

Я использую хук useMutation для отправки данных формы в мое приложение. Мне нужно передать данные, неизвестные при первом рендеринге компонента, поэтому я пытаюсь использовать функцию, возвращаемую из ловушки useMutation, для передачи сложного объекта. Я следую примеру в документации Apollo (https://www.apollographql.com/docs/react/data/mutations/), но получаю 400 Network Error, которая, по моему мнению, связана с моей переменной, которая не прошла правильно. Когда я жестко кодирую данные в мутации, это работает.

компонент. 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}});
 };