如何在gatsby-node.js中执行GraphQL多查询获取所有所需uid

问题根因 #

在gatsby-node.js中执行组合GraphQL查询时，若不同查询块下存在同名返回字段（比如多个Prismic文档类型下都返回uid字段且未做区分），GraphQL解析阶段会出现字段覆盖，导致后定义的查询块数据无法正常返回，最终只能拿到部分查询结果。

修复方案 #

方案1：给同名字段加唯一别名（推荐） #

修改查询语句，给不同文档类型下的uid字段设置互不重复的别名，从根源避免字段冲突，修改后的查询语句如下：

{
  allPrismicLastPosts {
    nodes {
      data {
        blogs {
          blog {
            document {
              ... on PrismicBlog {
                blogUid: uid
              }
              ... on PrismicCulture {
                cultureUid: uid
              }
            }
          }
        }
      }
    }
  }
  allPrismicMainBlogs {
    nodes {
      data {
        blogs {
          blog {
            document {
              ... on PrismicBlogMain {
                mainBlogUid: uid
              }
            }
          }
        }
      }
    }
  }
}

拿到查询结果后，按字段别名遍历提取所有uid即可，gatsby-node.js中完整参考代码：

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const { data, errors } = await graphql(`
    {
      allPrismicLastPosts {
        nodes {
          data {
            blogs {
              blog {
                document {
                  ... on PrismicBlog {
                    blogUid: uid
                  }
                  ... on PrismicCulture {
                    cultureUid: uid
                  }
                }
              }
            }
          }
        }
      }
      allPrismicMainBlogs {
        nodes {
          data {
            blogs {
              blog {
                document {
                  ... on PrismicBlogMain {
                    mainBlogUid: uid
                  }
                }
              }
            }
          }
        }
      }
    }
  `)

  if (errors) throw errors

  // 提取普通博客、文化内容uid
  const commonPostUids = []
  data.allPrismicLastPosts.nodes.forEach(node => {
    node.data.blogs.forEach(item => {
      const doc = item.blog.document
      if (doc.blogUid) commonPostUids.push(doc.blogUid)
      if (doc.cultureUid) commonPostUids.push(doc.cultureUid)
    })
  })

  // 提取主专栏博客uid
  const mainBlogUids = []
  data.allPrismicMainBlogs.nodes.forEach(node => {
    node.data.blogs.forEach(item => {
      const doc = item.blog.document
      if (doc.mainBlogUid) mainBlogUids.push(doc.mainBlogUid)
    })
  })

  // 后续遍历uid调用createPage生成对应页面即可
}

方案2：拆分独立查询 #

如果加别名后仍存在返回异常，可以将两个查询拆为两次独立的graphql调用，分开获取结果后再做处理，不存在字段冲突问题：

// 第一次查询获取lastPosts数据
const lastPostsRes = await graphql(`
  {
    allPrismicLastPosts {
      nodes {
        data {
          blogs {
            blog {
              document {
                ... on PrismicBlog { uid }
                ... on PrismicCulture { uid }
              }
            }
          }
        }
      }
    }
  }
`)
if (lastPostsRes.errors) throw lastPostsRes.errors

// 第二次查询获取mainBlogs数据
const mainBlogsRes = await graphql(`
  {
    allPrismicMainBlogs {
      nodes {
        data {
          blogs {
            blog {
              document {
                ... on PrismicBlogMain { uid }
              }
            }
          }
        }
      }
    }
  }
`)
if (mainBlogsRes.errors) throw mainBlogsRes.errors

// 分别从两个返回结果中提取uid即可

拆分查询不会对构建速度造成明显影响，Gatsby构建阶段会对GraphQL请求做统一缓存优化。

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