Gatsby GraphQL如何合并两个同Prismic Collection的查询

GraphQL 同查询作用域下不允许出现同名字段，Gatsby 页面查询在编译阶段会做统一合并，哪怕你把同名字段拆分在不同组件片段里，只要同属页面层查询范围，不加别名就会触发冲突。子组件拆分后报undefined，基本是因为在普通子组件里误用了仅页面组件生效的页面查询，这类查询不会被Gatsby编译识别，自然拿不到返回值。

直接在同一个页面查询中，给两个入参不同的allPrismicCollection字段设置不同别名，一次请求就能同时拿到分页数据和全量数据，没有额外性能损耗，也不会出现字段冲突。
合并后的查询代码示例：

query CollectionPageQuery($limit: Int!, $skip: Int!) {
  # 带分页、排序参数的分页列表，设置别名pagedCollections
  pagedCollections: allPrismicCollection(
    sort: {fields: data___collection___text, order: ASC}
    limit: $limit
    skip: $skip
  ) {
    nodes {
      data {
        slides {
          slide {
            document {
              ... on PrismicSlide {
                data {
                  blogs {
                    blog {
                      document {
                        ... on PrismicBlog {
                          uid
                          data {
                            image {
                              gatsbyImageData(aspectRatio: 1.5)
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  # 无参数的全量列表，设置别名allCollections
  allCollections: allPrismicCollection {
    nodes {
      data {
        collection {
          text
        }
        slides {
          slide {
            document {
              ... on PrismicSlide {
                id
                data {
                  blogs {
                    blog {
                      document {
                        ... on PrismicBlog {
                          id
                          data {
                            tags {
                              tag
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

使用时，原本取分页数据的data.allPrismicCollection替换为data.pagedCollections，全量数据从data.allCollections获取即可。

如果需要把全量查询逻辑拆分到独立子组件，不能在子组件里使用页面查询（页面查询仅对src/pages目录下的页面组件生效，普通组件中写的页面查询不会被Gatsby编译处理，必然返回undefined），要使用Gatsby内置的useStaticQuery Hook 实现：

• 静态查询不支持动态传参，刚好适配不需要limit/skip变量的全量查询场景
• 子组件代码示例：

import { useStaticQuery, graphql } from "gatsby"

const FullCollectionComponent = () => {
  const { allCollections } = useStaticQuery(graphql`
    query GetFullCollection {
      allCollections: allPrismicCollection {
        nodes {
          data {
            collection {
              text
            }
            slides {
              slide {
                document {
                  ... on PrismicSlide {
                    id
                    data {
                      blogs {
                        blog {
                          document {
                            ... on PrismicBlog {
                              id
                              data {
                                tags {
                                  tag
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  `)

  // 直接使用allCollections.nodes做业务渲染即可，不会出现undefined报错
  return <div>{/* 业务逻辑 */}</div>
}

export default FullCollectionComponent

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