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
}