javascript - 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
}