Rate limits

To ensure delivery of optimal experiences to all customers, a rate limit is enforced on all GraphQL queries for the shared regions. This means there are limits to the number of uncached requests you can make to your content API.

When you exceed the rate limits, you'll get a 429 error.

Cached requests are not rate limited. Uncached requests that fetch content from the database are rate limited on the different tiers by default, as follows:

  • Community: 5req/sec
  • Professional: 10req/sec
  • Scale: 35req/sec
  • Enterprise: >50req/sec

The rate limiting depends on the current load of the shared region and the subscription plan. These limits can be lifted on dedicated clusters and enterprise plans. You can contact sales to request a custom plan.

This document will go over how to handle API rate limits with Next.js and Gatsby.

Next.jsAnchor

Thread limitingAnchor

You can use this experimental setting in Next.js for disabling multithreading:

// Your Next.js config file (next.config.js)
...
experimental: {
workerThreads: false,
cpus: 1
},
...

This setting will force the build to be single-threaded, which limits the speed at which requests are made within the getStaticProps.

As a result, the build runs slower but completes without errors.

ThrottlingAnchor

The following Next.js example uses pThrottle, and allows you to control the limit of API calls per interval.

import React from 'react';
import { allProducts } from '../../utils/getProducts';
import { gql } from '../../utils/hygraph-client';
import { throttledFetch } from '../../utils/throttle';
// Singular query used in getStaticProps
const query = gql`
query GetSingleItem($slug: String!) {
product(where: { slug: $slug }) {
name
slug
}
}
`;
export async function getStaticPaths() {
// One call to get all paths
// No need to throttle this
// Unless you have a LOT of these calls
const products = await allProducts();
const paths = products.map((product) => ({
params: { slug: product?.slug },
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
// For each path, there will be an API call
// We need to throttle this
// We need to throttle it on a global throttle, so we need to set that externally
// throttleFetch comes from a utility area and is shared among all dynamic route files
/*
import pThrottle from 'p-throttle'
import hygraphClient from './hygraph-client'
// Set the limit of # of calls per interval in ms (5 per second)
const throttle = pThrottle({limit: 5, interval: 1000})
export const throttledFetch = throttle(async (...args) => {
const [query, vars] = args
const data = await hygraphClient.request(query, vars)
return data
})
*/
const product = await throttledFetch(query, { slug: params.slug });
return {
props: product,
};
}
export default function Page({ product }) {
// Each page produced by paths and props
return (
<>
<h1>{product.name}</h1>
</>
);
}

GatsbyAnchor

Concurrency overrideAnchor

You can use queryConcurrency with our official Gatsby source plugin for Hygraph projects.

This key indicates the number of promises ran at once when executing queries. Its default value is set to 10.

This plugin has been deprecated and no longer receives support. However, if you are already using it and have encountered a problem with rate limits, then we suggest you use the queryConcurrency solution.

ThrottlingAnchor

The following Gatsby example uses pThrottle, and allows you to fetch 1 concurrent request maximum, with a minimum delay of 0.5 seconds.

import { createHttpLink } from "apollo-link-http";
import pThrottle from "p-throttle";
// Throttle fetches to max 1 concurrent request and
// min. delay of 0.5 seconds.
const throttledFetch = pThrottle( (...args) => {
return fetch(...args);
}, 1, 500);
const link = createHttpLink({ uri: "/graphql" fetch: throttledFetch });