asyncAwaitReactComponent.js

import React, { PureComponent } from 'react'

const contextTypes = {
  router: PropTypes.object.isRequired,
  api: PropTypes.object.isRequired,
  relay: PropTypes.shape({
    variables: PropTypes.shape({
      category: PropTypes.string.isRequired,
    }).isRequired,
  }).isRequired,
}

class AsyncAwait extends PureComponent {
  constructor(props, context) {
    super(props, context)
    this.state = {}
  }

  async componentDidMount() {
    const res = await this.context.api.fetch('/logout', { method: 'POST' }).then(() => {
      this.context.api.environment.getStore().getSource().clear();
      this.context.router.push(location.pathname);
    });
    const ipResponse = await fetch('https://api.ipify.org?format=json')
    const { ip } = await ipResponse.json()
    await this.setStateAsync({ ipAddress: ip })
   }

  setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    })
  }

  render() {
    return (
      <div
        My IP is {this.state.ipAddress || 'Unknown'}
      </div>
    )
  }
}

AsyncAwait.contextTypes = contextTypes;

export default AsyncAwait