GraphQL Error (Code: 429) - Next Js project

Question

For anyone working on a nextjs project, who's struggling with GraphQL Error (Code: 429), here's a quick fix.

The back story...:

I built a headless CMS using Hygraph and NextJS 13 for a blog project. I also used the npm graphql-request package. I originally wanted to have it run on a server, but ended up deciding to use static generation so I could host the site using a simpler/less expensive hosting package. Up to the point where I had 10 posts, everything worked fine. Once I increased the number of posts, I got the error 429! Apparently Hygraph has a cap on requests per second based on the type of package you're using (I'm on the free one), so once you hit that cap, you'll get this error.

Answer 1

add this to your Next.js config file (next.config.js)

experimental: {
  workerThreads: false,
  cpus: 1
},

for more details pls refer to: HYGRAPH SOLUTION PAGE

Answer 2

I encountered a similar issue while using Next.js 13 and HygraphCMS, and here's how I resolved it:

I created a function to introduce a delay or pause in the execution of code by returning a promise that resolves after a specified number of milliseconds:

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

Then, I modified my fetch function to incorporate the previous delay. The 200ms delay ensures that it will be capped at 5 requests per second. fetchHygraphQuery is my abstraction of client.query from Apollo:

async function fetchPostsSlugWithDelay() {
  await delay(200);

  const query = gql`
    query PostSlug {
      posts(first: 100) {
        slug
      }
    }
  `;
  const { posts } = await fetchHygraphQuery(query);

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

Finally, I used the generateStaticParams function with the added delay:

export async function generateStaticParams() {
  const slug = await fetchPostsSlugWithDelay();
  return slug;
}