GraphQL 片段的片段

Posted 2023-03-08

【中文标题】GraphQL 片段的片段

【英文标题】：GraphQL fragment of fragments

【发布时间】：2020-04-22 16:52:36

【问题描述】：

我有一个这样的 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，因为我不确定片段是什么类型。这可能吗？

【问题讨论】：

这能回答你的问题吗？ Using GraphQL Fragment on multiple types

【参考方案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

【讨论】：

抱歉回复晚了。所以我想你可以这样做，但不确定在这种情况下SomeInterfaceOrUnionType 需要是什么。片段中的 3 个事物中的每一个都是它们自己的类型。

@Coop 您需要检查您正在查询的架构以确定navigationLinkLeft 字段的类型。如果您没有自己编写架构，您可以查看 GraphiQL 或 GraphQL Playground 中的文档，或者使用自省。

对。所以 GraphiQL 告诉我，navigationLeftLink 上的 3 个潜在数据集是 PageHomeNavigationLinkLeft 类型，navigationLinkRight 上的 3 个是 NavigationLinkRight 类型。那么在类型不同的情况下，是否还能实现我想要的呢？

@Coop 对不起，我误解了你的评论。如果类型不同，那么，不，你将无法做 DRY 的事情。请查看我的编辑。