Как сбросить хук useMutation в Apollo Client
Я разрабатываю форму React, привязанную к мутации GraphQL, используя useMutation Клиента Apollo. На сервере я выполняю некоторую проверку и в случае ошибок отклоняю мутацию. На стороне клиента я использую объект error для получения ошибок проверки. Мой крючок выглядит так:
const [addDrone, { error }] = useMutation(ADD_DRONE)
Поэтому я распаковываю объект error и представляю его пользователю в диалоговом окне, чтобы сообщить ему/ей, что пошло не так. После того, как пользователь закроет диалоговое окно, я хочу дать пользователю возможность исправить ошибку, чтобы он/она могли повторно отправить форму. Вот где все становится волосатым. Я хочу очистить объект error, когда пользователь закроет диалоговое окно, но поскольку эта переменная поступает из хука useMutation, у меня нет возможности изменить или сбросить ее. Похоже, useMutation был разработан, чтобы выстрелить один раз и больше не использовать.
Итак, мой вопрос: есть ли способ «сбросить» крючок useMutation обратно в исходное состояние?
Ответы 1
ОБНОВЛЕНИЕ 22.12.2021: начиная с версии 3.5.0@apollo/client хук useMutation теперь предоставляет метод reset. Вы можете использовать этот метод, чтобы вернуть хук в исходное состояние. Например.:
const [addDrone, { error, reset }] = useMutation(ADD_DRONE)
Ниже приведены некоторые заметки из официальной документации по этому методу.
Вызовите reset, чтобы сбросить результат мутации в исходное состояние (т. е. до вызова функции mutate). Вы можете использовать это, чтобы включить пользователям отклонять данные о результатах мутации или ошибки в пользовательском интерфейсе.
Вызов сброса не удаляет какие-либо кэшированные данные, возвращенные выполнение мутации. Он влияет только на состояние, связанное с Хук useMutation, вызывающий повторную визуализацию соответствующего компонента.
Старый ответ, сохраненный для тех, кто использует более старую версию @apollo/client:
По состоянию на 26.12.2020 невозможно сбросить useMutation, однако есть два запроса функций #157 #170 в репозитории Apollo Feature Request, поэтому это может измениться в будущем.
Самый простой способ реализовать это поведение прямо сейчас — удалить переменную error и вместо этого использовать обработчик onError. Это обратный вызов, предоставляемый useMutation, который использует тот же объект error. Затем вы можете подключить это к своей собственной переменной с состоянием, что дает вам точно такую же переменную error и возможность использовать setError для ее очистки. См. этот пример ниже:
const [error, setError] = React.useState(null)
const [addDrone] = useMutation(ADD_DRONE, {
onError: setError,
})
Если вы также хотите сбросить объект data, вы можете ввести еще один кортеж с состоянием [data, setData] и связать setData с обратным вызовом onCompleted.
Сброс результата мутации реализован в
@apollo/client 3.5.xgithub.com/apollographql/apollo-client/issues/…