Я хочу использовать мутацию в обработчике событий. Мое событие определяется так:
(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
)
Итак, как мне вызвать мутацию внутри обработчика событий?
So, how do I call a mutation inside an event handler?
client.mutation()
или <Mutation/>
)useMutation
возвращает функцию, предназначенную для использования по запросу — эта функция должна использоваться в обработчике события, а не целиком useMutation
Описание проекта react-apollo-hooks содержит пример использования использовать мутацию с обработчиком событий.
Хуки используются безоговорочно (требование) - useMutation
создает функцию - вы можете ее использовать или нет - пользовательский интерфейс может использовать ее или нет - это не роль пользовательского интерфейса решать, когда создать функцию, которую может использовать пользовательский интерфейс
Теперь понял, да, это был класс ReactApolloHooks.useMutation, который создал эту проблему. Спасибо!
Хорошо, дело в том, что с точки зрения пользовательского интерфейса имеет смысл создать useMutation в то же время, когда я хочу его использовать. Когда пользователь нажимает кнопку OK. Глядя на это, кажется, что мне нужно создать среднюю кнопку, например OK1, где useMutation создает функцию, и при нажатии OK2 я могу выполнить эту функцию.