Using Next.js hooked up to Apollo, I have a good 50 or so non-dynamic URLs fetching data using getStaticProps()
. It works wonderfully, and I love how the pages load in. The issue I am facing is that because Vercel builds the static versions of these pages at build, I quickly reach the rate limits for the API being used on those pages after about 40 are built. Given I don't have control of those rate limits, is there any way to throttle my data calls in each getStaticProps
to space out those data calls at build time? My getStaticProps
looks something like this on each page:
export async function getStaticProps() {
const apolloClient = initializeApollo()
await apolloClient.query({
query: XXXXXXX,
variables: {handle: "XXXXXXX"}
})
return {
props: {
initialApolloState: apolloClient.cache.extract(),
},
revalidate: 1,
}
}
Everything works fine, or was when I had less pages and didn't have enough pages to hit the rate limit.
I ended up throttling my requests by 100ms by throwing a setTimeout with my request in it, inside of a promise. Worked exactly as intended during production build.
const sleep = (milliseconds, apolloClient) => {
return (
new Promise(function(resolve, reject){
setTimeout(() => {
const request = apolloClient.query({
query: XXXXXX,
variables: {handle: "XXXXXX"}
});
resolve(request);
}, milliseconds)
});
)
};
export async function getStaticProps() { const apolloClient = initializeApollo()
await sleep(200, apolloClient)
return {
props: {
initialApolloState: apolloClient.cache.extract(),
},
revalidate: 1,
}
}