Next.js项目中GraphQL Error (Code:429)问题如何解决？

问题场景 #

我用Hygraph作为无头CMS，搭配NextJS 13和graphql-request包构建博客，选择静态生成方案来实现低成本托管。当文章数量在10篇以内时一切正常，但文章数增加后触发了GraphQL 429错误——这是因为Hygraph免费版设置了每秒请求次数上限，静态生成阶段批量发起的请求超过了限制。

可行解决方案 #

• 合并批量请求：避免为每篇文章单独发起GraphQL请求，改成一次性获取所有文章的完整数据，再在本地处理拆分。比如原本在getStaticProps和getStaticPaths中分别请求，现在合并为一次请求拿到所有文章的slug和内容：

  import { request } from 'graphql-request';
  import { gql } from 'graphql-tag';
  
  const GET_ALL_POSTS = gql`
    query GetAllPosts {
      posts {
        slug
        title
        content
        publishedAt
        // 只保留业务必需的字段
      }
    }
  `;
  
  // getStaticPaths中直接用全量数据生成路径
  export async function getStaticPaths() {
    const { posts } = await request(process.env.HYGRAPH_API_URL, GET_ALL_POSTS);
    const paths = posts.map(post => ({ params: { slug: post.slug } }));
    return { paths, fallback: 'blocking' };
  }
  
  // getStaticProps中直接从全量数据筛选对应文章
  export async function getStaticProps({ params }) {
    const { posts } = await request(process.env.HYGRAPH_API_URL, GET_ALL_POSTS);
    const post = posts.find(p => p.slug === params.slug);
    return {
      props: { post },
    };
  }
  

• 添加请求节流延迟：如果必须拆分请求，手动给每个请求添加间隔时间，避免短时间内触发频率上限。示例：

  async function fetchSinglePost(slug) {
    return request(process.env.HYGRAPH_API_URL, gql`
      query GetPost($slug: String!) {
        post(where: {slug: $slug}) {
          // 字段定义
        }
      }
    `, { slug });
  }
  
  // 按顺序间隔发起请求
  async function fetchPostsWithThrottle(slugs) {
    const posts = [];
    for (const slug of slugs) {
      const post = await fetchSinglePost(slug);
      posts.push(post);
      await new Promise(resolve => setTimeout(resolve, 500)); // 间隔500ms
    }
    return posts;
  }
  

• 启用增量静态再生（ISR）：利用NextJS的ISR特性，避免构建阶段一次性生成所有页面，改为用户访问时按需生成，同时设置页面重新验证时间，分散请求压力：

  export async function getStaticProps({ params }) {
    const { post } = await request(process.env.HYGRAPH_API_URL, GET_POST_BY_SLUG, { slug: params.slug });
    return {
      props: { post },
      revalidate: 86400, // 24小时后自动重新生成页面
    };
  }
  

• 优化GraphQL查询：确保查询只包含业务必需的字段，减少单请求的数据量，同时避免不必要的嵌套查询，提升请求效率。

内容的提问来源于stack exchange，提问作者user20029377