Gatsby GraphQL 反应

Question

因为我在 Graphql 中使用了一点 Apollo，所以 apollo 查询提供了“加载”，我可以通过检查加载状态来简单地渲染一些加载器。

当我使用 Gatsby 和 useStaticQuery 挂钩时，我无法获得任何“加载”状态，是否可以通过某种方式对其进行检查？或者除了useStaticQuery还有其他钩子吗？有人可以向我解释一下吗？

Answer 1

Gatsby 在构建时运行查询并稍后用 JSON 文件导入替换它们，这就是为什么不需要加载状态，因为查询已经有数据了

根据Gatsby documentation

特定于查询期间设置的 GraphQL 服务器的代码 构建时间不再相关，可以交换 为每个查询提取的 JSON 数据。

与 GraphQL 和查询声明相关的导入更改为 对应于 Gatsby 的查询结果的 JSON 的导入 运行查询时发现

例如下面的组件

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

在构建后将被以下代码覆盖

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