Вызов ловушки (useMutation) внутри ошибки обработчика событий: «Хуки можно вызывать только внутри тела компонента функции» - PullRequest
Новая
       41

Вызов ловушки (useMutation) внутри ошибки обработчика событий: «Хуки можно вызывать только внутри тела компонента функции»

0 голосов
/ 20 мая 2019

Я хочу использовать мутацию в обработчике событий. Мое событие определено так: 

(JSX attribute) onOk?: ((e: React.MouseEvent<any, MouseEvent>) => void) | undefined

Так я называю мутацию с клиента 

export const IMPORT_INFO_MUTATION = gql`
  mutation ImportPolicy($data: ImportPolicyInput!) {
    importPolicy(data:$data)
    {
      _id
      name
    }
 }

И в конце концов я называю это так: 

      onOk={() => {

        useImportPolicyMutation({
          variables: {
            data: {
              jsonData: JSON.parse(importPolicyData)
            }
          },
        })
      }

`Не беспокойтесь о переменных и параметрах в мутации. Они в порядке. Проблема в том, что я получаю следующую ошибку: 

Unhandled Rejection (Invariant Violation): Invalid hook call. Hooks can only 
be called inside of the body of a function component. This could happen for 
one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app

Это ловушка, потому что useMutation определяется так: 

  return ReactApolloHooks.useMutation<ImportPolicyMutation, ImportPolicyMutationVariables>(
   ImportPolicyDocument,
baseOptions
 )

Итак, как мне вызвать мутацию внутри обработчика событий?

1 Ответ

1 голос
/ 20 мая 2019

Итак, как мне вызвать мутацию внутри обработчика событий?

  1. Крючки предназначены ТОЛЬКО для функциональных компонентов , а не для класса (используйте компонент apollo client.mutation() или <Mutation/>)
  2. useMutation возвращает функцию, предназначенную для использования по требованию - эта функция должна использоваться в обработчике событий, а не целиком useMutation

Описание проекта activ-apollo-hooks содержит пример usemutation , используемого с обработчиком событий.

...