React async data fetch не извлекает данные при статической сборке

• Я создаю статический сайт, используя Sanity.io и Gatsby.js.
• Данные хранятся через Sanity, а я получаю их через GROQ.
• Хост и сборка находятся на Netlify.

Проблема в том, что при построении я получаю только результат рендеринга Loading. Это действительно работает в разработке. (что, я уверен, из-за горячей загрузки)

Как мне создать рендеринг (асинхронную) выборку данных для сборки? Я не хочу, чтобы это было в componentDidMount() или useEffect(), потому что, насколько я понимаю, запрос будет на стороне клиента. это привело бы к запросу api для каждой загрузки страницы, верно? Вместо этого я просто хочу построить одну.

Могу ли я приостановить сборку / рендеринг, если еще нет данных?

Ниже мой упрощенный код

    import React from "react"
    import useSWR from "swr"
    import client from "../../../../../sanityClient"
    import BlockCarousel from "../blockCarousel/blockCarousel"

    const BlockCarouselBlog = ({ block }) => {
      const skip = 0
      const limit = block.itemAmount ? block.itemAmount : 10
      const params = { skip, limit: skip + limit - 1 }
      let {
        data,
        error,
      } = useSWR(
        '*[_type == "blog"] | order(_createdAt asc) [$skip..$limit]',
        query => client.fetch(query, params)
      )

      if (error) console.log(error)
      if (!data) return <div>Loading</div>

      block.blocks = data

      return <BlockCarousel block={block} />

    }
    export default BlockCarouselBlog

.