Gatsby GraphQL React

Question

since I was using a little bit Apollo with Graphql, apollo query provide 'loading' where I can simply render some loader by checking loading state.

While Iam using Gatsby and useStaticQuery hook I cant get any 'loading' state, is that possible to check it somehow? or maybe there is other hook than useStaticQuery? Someone could please explain me that thing?

Answer 1

Gatsby runs queries on build time and replaces them with JSON file imports later which is why there is not need for a loading state as the queries already have data for them

According to Gatsby documentation

Code that is specific for querying the GraphQL server set up during build time is no longer relevant, and can be swapped out in exchange for the JSON data that has been extracted for each query.

The imports related to GraphQL and query declarations are changed to imports for the JSON that correspond to the query result that Gatsby found when it ran the query

For example, the below component

import { useStaticQuery, graphql } from "gatsby"
export () => {
  const data = useStaticQuery(graphql`
      siteMetadata {
        site {
            title
        }
      }
  `)
  return (
    <h1>
        {data.siteMetadata.site.title}
    </h1>
  )
}

will be overriden with the below code post the build

import dataJson from `/d/<hash>.json`
export () => {
  const data = dataJson
  return (
    <h1>
        {data.siteMetadata.site.title}
    </h1>
  )
}