使用 gatsby 和 netlify 在构建时获取后在客户端上保留 api 数据

Question

Gatsby 和 Netlify 的新手，但我有一个问题无法在其他地方找到答案，可能是因为这是错误的方法。

我正在为需要显示最后一天/周/月数据的动画视图的客户端构建一个天气应用程序，这需要向天气 API 发出多个请求以获取不同分辨率的数据，然后将其插入本质上使用 setInterval 进行可视化。

与其在客户端发出所有这些请求，我想到的是，我可以在构建时通过计划构建获取所有数据，并每天使用这些更新的数据静态地为页面提供服务，这样可以节省 API 并减少费用。

问题是 gatsby 假设您想用获取的数据生成 html 并使用 createPages 但在这里我只想将数据作为 json 存储在 js 包中以便在客户端上呈现。

有没有办法将构建时获取和格式化的数据放入 json 或类似的格式中，并静态服务以在客户端上呈现？

Answer 1

你用 jamstack 标签标记了这个问题，你的方法完全符合这种方法。

有没有办法将构建时间获取和格式化的数据放入 json 或类似的并静态服务以在客户端上呈现？

是的。

1. 构建显示天气数据的 React 代码。
2. 构建您的天气数据 json。
3. 仅使用天气数据 json 中的变量。

简单示例：

import data from "./data/weatherData.json"

const WeatherApp = () => {
  return (
    <Layout>
      <h1>{data.title}</h1>
      <div>{data.rain}</div>
      <div>{data.temperature}</div>
    </Layout>
  );
};

为了填充天气数据，您可以构建一个复杂的 GraphQL 查询，以完全按照您需要的方式获取所有数据。

另一种方法是构建您自己的 API，例如使用 AWS lamba 或类似的无服务器免费服务，并以此提供您的天气数据。这样您就不需要触发gatsby build。