Gatsby.js API Fetch, sample

index.js

// Gatsby.js API Fetch, sample
// https://www.gatsbyjs.com/docs/data-fetching/#retrieving-data-with-the-fetch-api

import React, { useState, useEffect } from "react"
// import { graphql, useStaticQuery } from "gatsby"

const IndexPage = () => {
  // Client-side Runtime Data Fetching
  const [starsCount, setStarsCount] = useState(0)
  useEffect(() => {
    // get data from GitHub api
    fetch(`https://api.github.com/repos/gatsbyjs/gatsby`)
      .then(response => response.json()) // parse JSON from request
      .then(resultData => {
console.log( "stargazers_count=", resultData.stargazers_count )
        setStarsCount(resultData.stargazers_count)
      }) // set data for the number of stars
  }, [])

  return (
    <section>
      <h1>Gatsby - index</h1>
      <hr />
      <p>
        Build Time Data: Gatsby repo{` `}
      </p>
      <p>Runtime Data: Star count for the Gatsby repo {starsCount}</p>
    </section>
  )
}

export default IndexPage