0
  • 我正在使用Sanity.io和Gatsby.js构建一个静态站点。
  • 数据通过 Sanity 托管，我通过GROQ获取它。
  • 主机和构建在Netlify上。

问题是，当我构建时，我只得到Loading. 它确实在开发中起作用。（我敢肯定是因为热加载）

我将如何为构建构建渲染（异步）数据获取？我不想在componentDidMount()oruseEffect()因为据我了解，查询将是客户端。这将导致每个页面加载的 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
4

1 回答 1

1

如果您想使用 GROQ 以这种方式获取数据，并且您不想在客户端执行此操作，您可能想要创建一个使用 Gatsby 的 API 创建 GraphQL 节点的自定义源插件，或者定义一个预构建函数将获取您的所有数据并使其在静态 JSON 文件或类似文件中可用，然后将它们导入您的组件或在客户端获取它们。

将 GROQ 与 Gatsby 一起使用，而不将 GraphQL 用于静态渲染的组件将是一堆额外的工作，并且与 Next.js 之类的东西相比，你会失去很多 Gatsby 的价值。

于 2020-03-31T16:57:49.507 回答