Реакция: клиент Apollo: не может обновляться во время существующего перехода состояния
Я пытаюсь создать компонент, который обертывает компонент запроса клиента Apollo. Я использую apollo-link-state для управления локальным состоянием, и я хочу иметь систему уведомлений об ошибках, которая уведомляет пользователя обо всем.
мой компонент выглядит так ...
export class Viewer extends React.Component {
static propTypes = {
children: PropTypes.func
};
render() {
const { children } = this.props;
return (
<Query query = {GET_VIEWER}>
{({ data, client, error }) => {
if (error) {
client.mutate({
mutation: ADD_NOTIFICATION,
variables: { message: unpackApolloErr(error), type: 'Error' }
});
}
return children(data.viewer ? data.viewer : user);
}}
</Query>
);
}
}
но когда он пытается добавить ошибку с мутацией, я получаю ошибку реакции ..
Warning: forceUpdate(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
Я не вижу очевидного способа обойти это, и я не понимаю, почему это даже происходит, если клиент предоставляется как опора для рендеринга и не может использоваться ... Мне, должно быть, не хватает чего-то простого, но я не могу понять, что это такое
Я хотел использовать это, но поскольку он объявляется до объявления клиента, я не мог найти способ включить мутации в локальное состояние с помощью функции onError.
Почему бы не объявить клиента за пределами области инициализации клиента? и onError (если (клиент) client.mutate))
Я попробую это и посмотрю, смогу ли я заставить его работать.
@KennethTruong Я не думаю, что могу вызвать конструктор клиента apolli без ссылки на ошибку ... которую сначала нужно пометить. Вы знаете, как этого добиться?
Это работает? пусть клиент; const errorLink = <ваш код здесь, который обращается к клиенту>; клиент = новый ApolloClient ({ссылки}); <ApolloProvider client = {client}>. Извините, что сложно отформатировать код в комментарии
Я зарегистрировал this из функции onError, и оказалось, что this.client доступен по умолчанию ...
Прохладный! Сообщите мне, работает ли это для вас (:
Кстати, если мои комментарии вам помогли. ты можешь принять мой ответ? Пытаюсь встроить Rep: D
Ответы 2
Ответ оказался, что клиент доступен в функции onError как this при использовании apollo-link-errorhttps://www.apollographql.com/docs/link/links/error.html
Раньше я пытался использовать onError для доступа к клиенту, но не было очевидно, что область, в которой он вызывается, действительно содержит клиента, даже если клиент объявлен после обработчика onError.
// client is available here even though it is defined first
const err = onError({ graphQLErrors }) => {
this.client.mutate({ mutation: ADD_ERROR, variables: { graphQLErrors }})
}
const client = new ApolloClient({
cache,
link: ApolloLink.from([err, httpLink])
})
Причина появления Warning: forceUpdate, вероятно, заключалась в том, что Apollo внутренне вызовет forceUpdate при мутации. Так что мутации должны быть в методе render.
Лучший способ справиться с мутациями после ошибки Apollo - добавить ссылку onError, как описано в https://www.apollographql.com/docs/react/features/error-handling.html#network.
// Add errorLink into Apollo Client
const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
this.client.mutate({ mutation: ..., variables: {}});
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([err, httpLink])
})
Вы пробовали использовать apollographql.com/docs/react/features/…, чтобы попытаться обновить клиент при возникновении ошибки? Таким образом, вам не нужно оборачивать компонент Apollo Query, и вы можете просто добавить ссылку