如何避免graphql请求中的代码重复？

Question

我正在使用 Gatsby 和 GraphQl 制作博客，但我找不到避免查询中出现代码重复的方法。 我有 3 个几乎相同的查询：

graphql(`
        {
          allContentfulRecette {
            edges {
              node {
                id
                nom
              }
            }
          }
        }
    `)

graphql`
        query IndexQuery {
          posts : allContentfulRecette(sort: {fields: dateDePublication}){
            edges {
              node {
                id
                nom
              }
            }
          }
        }
    `

graphql`
        query allRecettesByCategorie($slug: String!) {
          recettes : allContentfulRecette(
           sort: {fields: dateDePublication}
           filter: {categorie: {elemMatch: {slug: {eq: $slug}}}}
          ) {
            edges {
              node {
                id
                nom
              }
            }
          }
        }
    `

如您所见，它们非常相似，第二个只有一个排序，第三个有一个排序和一个过滤器。 我的问题是，我不仅有 2 个参数“id”和“nom”，因此每次在无头 CMS 中编辑字段时，很难在不同页面中维护这 3 个请求。

我试图做这样的事情，但我得到了这个错误：“graphql 标签中不允许字符串插值：”

export const pageQuery = graphql`
  query IndexQuery {
    posts : allContentfulRecette(sort: {fields: dateDePublication}){
    ${allContentfulRecette}
    }
  }
`

有没有一种方法可以将请求的共同元素（“边缘”内的所有内容）放在一个地方并在不同的请求中使用它？

Answer 1

我想你在找fragments:

GraphQL 包括称为片段的可重用单元。片段让您可以构建字段集，然后将它们包含在您需要的查询中。以下是如何使用片段解决上述情况的示例：