Question

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

虽然Iam使用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>
  )
}

盖茨比GraphQL React

1 个答案: