GraphQL 片段片段

Question

我有一个这样的 GraphQL 查询：

import { gql } from 'apollo-boost';

export default gql`
  {
    pageHomeCollection(limit: 1) {
      items {
        navigationLinkLeft {
          ... on PageBasic {
            slug
            title
          }
          ... on PageShop {
            title
          }
          ... on PostCollection {
            slug
            title
          }
        }
        navigationLinkRight {
          ... on PageBasic {
            slug
            title
          }
          ... on PageShop {
            title
          }
          ... on PostCollection {
            slug
            title
          }
        }
        title
      }
    }
  }
`;

navigationLinkLeft和navigationLinkRight请求的数据是相同的，所以我想避免重复。 我知道片段，但不确定是否可以提取 3 ... on因为我不确定片段是什么类型。 这可能吗？

Answer 1

是的，您可以嵌套片段。 假设navigationLinkLeft和navigationLinkRight具有相同的类型，您可以执行以下操作：

{
  pageHomeCollection(limit: 1) {
    items {
    navigationLinkLeft {
      ...YourFragment
    }
    navigationLinkRight {
      ...YourFragment
    }
    title
  }
}

fragment YourFragment on SomeInterfaceOrUnionType {
  ... on PageBasic {
    slug
    title
  }
  ... on PageShop {
    title
  }
  ... on PostCollection {
    slug
    title
  }
}

如果navigationLinkLeft和navigationLinkRight不具有相同的类型，这是不行的。 充其量只能避免重复字段本身：

{
  pageHomeCollection(limit: 1) {
    items {
    navigationLinkLeft {
      ...NavigationLinkLeftFragment
    }
    navigationLinkRight {
      ...NavigationLinkRightFragment
    }
    title
  }
}

fragment NavigationLinkLeftFragment on PageHomeNavigationLinkLeft {
  ...PageBasicFragment
  ...PageShopFragment
  ...PostCollectionFragment
}

fragment NavigationLinkRightFragment on NavigationLinkRight {
  ...PageBasicFragment
  ...PageShopFragment
  ...PostCollectionFragment
}

fragment PageBasicFragment on PageBasic {
  slug
  title
}

fragment PageShopFragment on PageShop {
  title
}

fragment PostCollectionFragment on PostCollection {
  slug
  title
}

上面避免了使用内联片段，但如果您不需要在别处按名称引用片段，则始终可以使用内联片段。 所以你也可以这样做：

navigationLinkLeft {
  ...PageBasicFragment
  ...PageShopFragment
  ...PostCollectionFragment
}
navigationLinkRight {
  ...PageBasicFragment
  ...PageShopFragment
  ...PostCollectionFragment
}