React asyn c извлечение данных не извлекает данные при сборке stati c

Question

• Я создаю сайт c, используя Sanity.io и Гэтсби. js.
• Данные размещаются через Сэнти и я выбираю его через GROQ .
• Хост и сборка включены Netlify .

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

Как мне построить рендеринг (асин c) выборки данных для сборки? Я не хочу иметь это в 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

.

Answer 1

Если вы хотите использовать GROQ для извлечения данных таким способом, и вы не хотите делать это на стороне клиента, вы, вероятно, захотите либо создать собственный плагин-источник, который создает узлы GraphQL, используя API-интерфейсы Gatsby, либо определить предварительно функция построения, которая извлекает все ваши данные и делает их доступными в файлах stati c JSON или аналогичных, а затем импортирует их в ваши компоненты или извлекает их на стороне клиента.

Использование GROQ с Gatsby без использования GraphQL для статически визуализируемых компонентов станет дополнительной работой, и вы потеряете много значения Gatsby по сравнению с чем-то вроде Next. js.