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.

Hi @G6ix welcome to StackOverflow and thanking for posting a Q&A! Please add more content to both the question and the answer. What is the project setup? What version of NextJS and GraphQL are you using? What other relevant packages are you using? When does the error occur? How does your answer solve it? — Mar 5 at 22:01

G6ixG6ix 1621 silver badge8 bronze badges · Accepted Answer · 2023-03-05 19:06:03Z

0

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

answered Mar 5 at 19:06

G6ix

1621 silver badge8 bronze badges

score 0 · Accepted Answer · 2023-09-20 00:18:11Z

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;
}

GraphQL Error (Code: 429) – Next Js project