Установление состояния в компоненте Query реакции-apollo

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

<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
    {({ data, loading, error }) => {
      this.setState({ title: data.title })

Я застрял в бесконечном цикле, так как это в рендере. Не следует ли использовать состояние компонента с компонентом запроса? А если нет, какова альтернатива?

Ответ 1

Независимо от того, какой компонент нуждается в этих данных, поскольку состояние должно отображаться внутри компонента Query, а затем передавать данные в него как опору. Например:

class MyComponent extends React.Component {
  constructor (props) {
    this.state = {
      title: props.post.title
    }
  }
}

<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
  {({ data, loading, error }) => {
    <MyComponent post={data.post}/>
  }}
</Query>

Ответ 2

Вы можете использовать опору onCompleted на компоненте Query для установки состояния. Смотрите пример ниже:

class MyComponent extends React.Component {
  constructor (props) {
    this.state = {
      isFirstRender: true
      title: props.post.title
    }
  }

  setTitle = title => {
    if (this.state.isFirstRender){
        this.setState({title, isFirstRender: false})
    }
  }

  render () {
    return <Query query={POST_QUERY} variables={{ id: this.props.match.params.id }} onCompleted={data => this.setTitle(data.post.title)} >
      {({ data, loading, error }) => {
        <MyComponent post={data.post}/>
      }}
    </Query>
  }
}

Edit:

Так как ошибка многократного запуска onCompleted была исправлена в последней версии react-apollo, теперь мы можем просто сделать:

  ...
     <Query query={POST_QUERY} variables={{ id: this.props.match.params.id }} onCompleted={data => this.setState({ title: data.post.title })} >
      {({ data, loading, error }) => {
         <MyComponent post={data.post}/>
      }}
    </Query>
  )
  ...