cosmicjs-react-cms-example.js

import React from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    cosmic: null,
      loading: true
    }
    const query = `{
      objectsByType(bucket_slug: "simple-react-blog", type_slug: "posts") {
        _id
        title
        metadata
      }
    }`
    const _this = this;
    axios.post(`https://graphql.cosmicjs.com/v1`, { query })
    .then(function (response) {
      if (!response.data.data.objectsByType) {
        _this.setState({
          error: true,
          loading: false
        })
      } else {
        _this.setState({
          cosmic: {
            posts: response.data.data.objectsByType
          },
          loading: false
        })
      }
    })
    .catch(function (error) {
      console.log(error)
    })
  }
  render() {
    if (this.state.loading)
      return <div>Loading...</div>;
    if (this.state.error)
      return <div>There was an error with this request.</div>
    return this.state.cosmic.posts.map(post => {
      return (
        <div style={{ marginBottom: 20 }} key={post._id}>
          <div style={{ marginBottom: 10 }}>{post.title}</div>
          <div><img src={`${post.metadata.hero.imgix_url}?w=600&auto=compression`} style={{ width: 300 }} /></div>
       </div>
      )
    })
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);