DetailPage.js

render() {
  return (
    <Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
      {({ data, loading, error }) => {
        if (loading) {
          return (
            <div className="flex w-100 h-100 items-center justify-center pt7">
              <div>Loading ...</div>
            </div>
          )
        }

        if (error) {
          return (
            <div className="flex w-100 h-100 items-center justify-center pt7">
              <div>An unexpected error occured.</div>
            </div>
          )
        }

        const { post } = data
        const action = this._renderAction(post)
        return (
          <Fragment>
            <h1 className="f3 black-80 fw4 lh-solid">{data.post.title}</h1>
            <p className="black-80 fw3">{data.post.text}</p>
            {action}
          </Fragment>
        )
      }}
    </Query>
  )
}