2

Gatsby 和 Netlify 的新手,但我有一个问题在其他地方找不到答案,可能是因为方法不对。

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

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

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

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

4

1 回答 1

2

你用 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.

于 2019-10-11T03:36:38.750 回答