Как вызвать setState в Apollo Query Render Props?

Question

Я пытаюсь объединить setState и Apollo Query, чтобы создать ошибку на компоненте верхнего уровня. Я на самом деле использую React Context, но это дает то же самое.

setError = () => this.setState({ isError: true });

render() {
  return (
   this.state.isError ? <CustomError /> : (
   <Query>
     {({ loading, error, data }) => {

       // first error check
       if (error) { 
         this.setError();
         // this all works if I return <div /> right here, but that's kinda bad
       }
       // I also want to set an error in a child component
       <VeryComplicatedComponentThatCantBeInThisFile setError={this.setError}>
     })
   </Query>
   )
  );
}

Кто-нибудь знает, как лучше всего это сделать?

Answer 1

У меня была похожая проблема с кэшированием данных формы с помощью реквизита рендеринга. К счастью, это обеспечивает onError а также onComplete обратные вызовы, так что вы можете установить состояния там. Обратите внимание, что эти обратные вызовы не будут запущены, пока он использует кеш.

class MyComponent extends React.Component {
  setError = () => this.setState({ isError: true });
  handleQueryError = error => {
    this.setError();
  };
  handleQueryComplete = data => {
    this.setState({formData: data});    
  };
  render() {
    return (<Query 
      fetchPolicy="network-only"
      onError={this.handleQueryError}
      onComplete={this.handleQueryComplete}>
      {({ loading, error, data }) => {
        return <VeryComplicatedComponentThatCantBeInThisFile isError={this.state.isError}>
      }}
    </Query>);
  }
}