Gatsby：初始页面加载后获取 json 文件

Question

我正在使用 Gatsby 构建我的第一个 PWA。我有一个包含对象数组的 3mb json 文件。这个应用程序的功能是您可以在 json 文件中搜索两个对象（通过它们的名称或匹配的别名）并检索有关这两个对象的所有数据。 此应用程序仅在单个 URL 端点上运行，加载时我通过查询所有字段立即下载整个 json 文件

export const example = graphql`
  allDataJson{
    ...examplesubCategories
  }`

并通过通过此查询传递给组件的 data-prop 访问数据。

const fullInfo = data.allDataJson.edges[0].node.example

我觉得在加载主页后获取 useEffect 中的数据是最有意义的，而且我可以在这种情况下显示加载微调器。

我的两个问题是

1：有没有办法在部署时从组件中获取这些数据，因为它不在数据库中，而是存储在 src/data/example.json 中？ （如果没有，是否可以从初始页面获取中删除 json 文件）

2：目前，一旦捆绑包下载了整个应用程序，就可以作为 PWA 离线使用，如果有办法实现 Q1，这些数据是否会使用 gatsby 的默认离线插件设置自动保存，或者我是否必须手动缓存这个数据以使应用离线可用。

如果有帮助，可以在https://tripmix.netlify.app/ 上找到它的实时版本。

Answer 1

将文件移至static/data/example.json。在构建时，Gatsby 会将static 文件夹的内容复制到public，从而使该文件在/static/data/example.json 上可用。然后，您只需向该 URL 发出 fetch 即可在客户端获取数据。

在gatsby-plugin-offline 配置 (docs) 中将此 URL 添加到 precachePages 选项应该没有任何问题，但如果您设置 HTTP 标头以长时间缓存此文件，则并非严格必要的。