NextJS getStaticProps中graphql-request如何单次执行多个查询

你之前的写法存在本质语法错误：把GraphQL查询当作JSON对象做字符串拼接，gql 标签返回的是GraphQL AST文档对象，直接插值拼接后传给接口的内容既不是合法GraphQL语法，也不是合法JSON结构，GraphCMS接口无法正常解析，自然返回异常结果。
GraphQL原生支持单次请求执行多个查询（查询批处理），不需要自定义拼接JSON格式，利用GraphQL自带的字段别名能力就可以实现需求。

第一步：编写组合查询 #

在queries.js中新增首页专用的组合查询，给第二个posts查询加别名避免字段冲突：

import { gql } from "graphql-request";

// 原有两个单查询可以保留，新增首页组合查询即可
export const homePageQuery = gql`
  query GetHomePageData {
    posts {
      title
      excerpt
      slug
      createdAt
      featuredImage {
        url
      }
      categories {
        name
        slug
      }
      author {
        bio
        name
        id
        photo {
          url
        }
      }
    }
    recentPosts: posts(orderBy: createdAt_DESC, last: 3) {
      title
      createdAt
      slug
      featuredImage {
        url
      }
    }
  }
`;

代码里的recentPosts:就是GraphQL字段别名，接口返回结果中全量文章会放在posts字段，最新3篇文章会放在recentPosts字段，不会出现字段覆盖问题。

第二步：修改数据拉取方法 #

调整getStaticHome方法，直接调用组合查询，返回两类数据：

export const getStaticHome = async () => {
  const data = await request(graphqlAPI, queries.homePageQuery);
  return {
    posts: data.posts,
    recentPosts: data.recentPosts
  };
};

第三步：调整getStaticProps传值 #

修改静态生成逻辑，把两类数据都作为props传给页面组件：

export const getStaticProps: GetStaticProps = async () => {
  const homeData = await getStaticHome();

  if (!homeData.posts) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      posts: homeData.posts,
      recentPosts: homeData.recentPosts
    },
    revalidate: 60,
  };
};

• 同个GraphQL请求中如果多次查询同一个根字段，必须给字段设置不同别名，否则会触发字段重复的语法错误
• 该方案不需要额外安装依赖，graphql-request和GraphCMS都原生支持这种多查询写法
• 相比分开发起两次查询请求，单次请求拉取多类数据可以减少一次网络往返，提升首页加载速度

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