Javascript 片段的GraphQL片段

我有这样一个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
      }
    }
  }
`;

{
  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

请求的数据是相同的，因此我希望避免重复。我知道片段，但不确定是否有可能提取3

。。。因为我不确定片段的类型。这可能吗？
是的，您可以嵌套片段。假设
navigationLinkLeft
和
navigationLinkRight
具有相同的类型，可以执行以下操作：

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
      }
    }
  }
`;

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

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

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
      }
    }
  }
`;

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

这回答了你的问题吗？这回答了你的问题吗？很抱歉迟了答复。所以我想你可以这样做，但不确定在这种情况下需要什么
SomeInterfaceRunionType
。片段中的3个内容都是各自的类型。@Coop您需要检查正在查询的架构，以确定
navigationLinkLeft
字段的类型。如果您没有自己编写模式，那么可以在GraphiQL或GraphQL游乐场中检查文档，或者使用introspection.Righty。因此GraphiQL告诉我navigationLeftLink上的3个潜在数据集的类型为
PageHomeNavigationLinkLeft
，navigationLinkRight上的3个数据集的类型为
navigationLinkRight
。那么，当类型不同时，是否仍有可能实现我想要的目标？@Coop抱歉，我误解了你的评论。如果类型不同，那么，不，你就不能干那么多。请看我的编辑。很抱歉回复太晚。所以我想你可以这样做，但不确定在这种情况下需要什么
SomeInterfaceRunionType
。片段中的3个内容都是各自的类型。@Coop您需要检查正在查询的架构，以确定
navigationLinkLeft
字段的类型。如果您没有自己编写模式，那么可以在GraphiQL或GraphQL游乐场中检查文档，或者使用introspection.Righty。因此GraphiQL告诉我navigationLeftLink上的3个潜在数据集的类型为
PageHomeNavigationLinkLeft
，navigationLinkRight上的3个数据集的类型为
navigationLinkRight
。那么，当类型不同时，是否仍有可能实现我想要的目标？@Coop抱歉，我误解了你的评论。如果类型不同，那么，不，你就不能干那么多。请看我的编辑。