Как мне «сбросить» компонент React после ошибки мутации с response-apollo?

Question

Я изучаю Apollo Server и Apollo Client и следую некоторым онлайн-примерам. Одна парадигма, которую я видел, состоит в том, что мутации apollo-реагируют, чтобы сделать что-то подобное этому

render() {
    const {props: {history}} = this
    const {state: {username, password}} = this

    return <Mutation mutation={REGISTER}
                     onCompleted={() => history.push('/login')}>
      {(register, {data, error, loading}) => {
        if (error) {
          return <div>{error.toString()}</div>
        }
        if (loading) return <div>Loading...</div>
        return ({JSX form, etc})

Работает нормально, и когда я получаю сообщение об ошибке - в моем случае, например, с дублированной регистрацией - вместо обычного JSX отображается сообщение об ошибке. Я в тупике, что делать, чтобы потом «перезагрузить» страницу. То есть я хотел бы иметь возможность предпринять какое-то действие, которое «очистило бы» ошибку Mutation и вернуло бы ее к рендерингу JSX, как это было до появления ошибки (либо пользователь может выполнить действие, либо я время ошибки и затем «перезагрузить» страницу). Если я обновлю страницу, она будет работать нормально, но, очевидно, я не хочу этого делать!

Я провел некоторый поиск и сразу же углубился в обсуждение клиентского кэша Apollo, который следующий в моем списке для изучения. На данный момент мне интересно, есть ли более простой способ сделать то, что я пытаюсь сделать.

Любые подсказки очень ценятся!

Answer 1

Самым простым решением может быть использование состояния компонента React для удержания ошибки, возвращаемой мутацией. А затем предоставьте пользователю действие для его очистки.

Если развернуть пример, он может выглядеть примерно так:

render() {
    const {props: {history}} = this
    const {state: {username, password, registrationError}} = this

    if (registrationError) {
      return (
        <div>
          {registrationError.toString()}
          <button onClick={() => this.setState({registrationError: null})}>
            Clear Error
          </button>
        </div>
      );
    }

    return <Mutation mutation={REGISTER}
                     onCompleted={() => history.push('/login')}
                     onError={(error) => this.setState({registrationError: error})}>
      {(register, {data, error, loading}) => {
        if (error) {
          // Just in case this is hit, return null
          return null;
        }
        if (loading) return <div>Loading...</div>
        return ({JSX form, etc})

Обратите внимание, что рендеринг ошибок был перемещен из обратного вызова Mutation. Я не совсем уверен