Как обновить состояние React внутри Relay QueryRenderer?

Question

У меня проблема с небольшим проектом React Relay . Компонент представляет собой форму с полями ввода, которая получает данные с сервера с помощью QueryRenderer и может отправлять измененные данные с помощью мутации. Проблема в том, что если вы обновите состояние внутри QueryRenderer , то компонент будет визуализирован снова, что приведет к бесконечному l oop. Но данные, полученные с сервера, должны быть приведены в состояние, чтобы их можно было обновить и отправить обратно на сервер. Как это сделать в Relay приложениях? Буду благодарен за любую помощь. Ниже приведен упрощенный код моего проекта. PS Некоторые теги взяты из ant design.

<QueryRenderer
  environment={environment}
  query={HeroAllPostQuery}
  render={({ error, props }) => {
    if (error) {
      return <div>{error.message}</div>;
    } else if (props) {
      let hero = props.viewer.allPosts.edges[0].node;
      this.setState({ name: hero.name });
      return (
        <Form>
          <Form.Item label="Hero name"><Input name='name' defaultValue={hero.name} value={this.state.name} onChange={this._handleChange} /></Form.Item>
          <Button type="primary" onClick={() => {
            this._handleUpdateHero(hero.id);
          }}>Save</Button>
        </Form>
      );
    }
    return <div>Loading...</div>
  }}
/>

Остальная часть приложения - обработчики форм, graphql query и др. c. работать правильно, поэтому я не дал их здесь. Проблема в том, где взять данные, полученные с сервера, использовать их в форме ввода, а затем отправить измененные данные с помощью мутации.