Gatsby.js API Fetch + HeadlessCMS, sample

index-head-sample.js

//  Gatsby.js API Fetch + HeadlessCMS, sample

import React, { useState, useEffect } from "react"

const IndexPage = () => {
  const [postItems, setPostItems] = useState([])
  const site_id = "123"
  const base_url = "http://hoge.com"
  var url = base_url+`/api/get/find?content=posts&site_id=${site_id}`
  useEffect( ()=>{
    fetch(url)
      .then(response => response.json())
      .then(resultData => {
// console.log( resultData )
        setPostItems(resultData)
      })
  }, [])

  return (
    <section>
      <h1>Gatsby - index5</h1>
      <hr />
      <p>
        Build Time Data: Gatsby repo{` `}
      </p>
      <hr />
      {postItems.map((item, index) => {
// console.log(item.id)
        return (<div key={index}
          id={item.id} title={item.title}><h3>{item.title}</h3>
            ID : {item.id}
          </div>      
        )
      })}
    </section>
  )
}

export default IndexPage