In Quick Tip #007, we described a method to fetch data from an API at build time (in this example it was GitHub Stargazers) to display on your site.
However, if you’re working on your site locally, you probably don’t want every Eleventy build to make a request to an external API call. You’d hit the rate limit pretty quickly (on GitHub, 60 per hour) and each request would slow down your build times!
Now there is an easier way. You can use the eleventy-fetch utility to cache these requests to save on both API limits and build performance!
npm install @11ty/eleventy-fetchduration time span—save on both your API limit count and your build time!This code is currently in use on the Eleventy web site to display GitHub stars in the footer. Check out the full source code.
import Fetch from "@11ty/eleventy-fetch";
export default async function () {
// https://developer.github.com/v3/repos/#get
let json = await Fetch("https://api.github.com/repos/11ty/eleventy", {
duration: "1d", // 1 day
type: "json", // also supports "text" or "buffer"
});
return {
stargazers: json.stargazers_count,
};
};const Fetch = require("@11ty/eleventy-fetch");
module.exports = async function () {
// https://developer.github.com/v3/repos/#get
let json = await Fetch("https://api.github.com/repos/11ty/eleventy", {
duration: "1d", // 1 day
type: "json", // also supports "text" or "buffer"
});
return {
stargazers: json.stargazers_count,
};
};Wrap the above code in a nice try catch allows you to return a fake data set if the very first request fails (no expired cache entry is available). Note that if there is already an expired cache entry available, we use that instead.
import Fetch from "@11ty/eleventy-fetch";
export default async function () {
try {
// https://developer.github.com/v3/repos/#get
let json = await Fetch(
"https://api.github.com/repos/11ty/eleventy",
{
duration: "1d", // 1 day
type: "json", // also supports "text" or "buffer"
}
);
return {
stargazers: json.stargazers_count,
};
} catch (e) {
console.log("Failed getting GitHub stargazers count, returning 0");
return {
stargazers: 0,
};
}
};const Fetch = require("@11ty/eleventy-fetch");
module.exports = async function () {
try {
// https://developer.github.com/v3/repos/#get
let json = await Fetch(
"https://api.github.com/repos/11ty/eleventy",
{
duration: "1d", // 1 day
type: "json", // also supports "text" or "buffer"
}
);
return {
stargazers: json.stargazers_count,
};
} catch (e) {
console.log("Failed getting GitHub stargazers count, returning 0");
return {
stargazers: 0,
};
}
};此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。