如何映射使用聯合和片段在頁面上呈現的graphql查詢

Question

架構：

type Link {
    items: [itemapi]      
    }

    type itemapi {
        id: ID!
        name: String!
        custom_attributes: [CUSTOM_ATTRIBUTES]
    }

    union CUSTOM_ATTRIBUTES = CustomString | CustomArray

   type CustomString {
    attribute_code: String
    value: String
  }

  type CustomArray {
    attribute_code: String
    value: [String]

  } 

  type Query {
    allLinks: Link!
  }
`;

功能：

const itemList= ({ data: {loading, error, allLinks }}) => {
  if (loading) {
    return <p>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <div className="itemList">
      { allLinks.items.map( aL => <div key={aL.id} className="items">{aL.???}</div> ) }
    </div>
  );
};
    const channelsListQuery = gql`
  query ChannelsListQuery {
      allLinks {
          items {
              id
              custom_attributes {
                  ... on CustomString{
                      value             
                  }
                  ... on CustomArray{
                      aliasVar: value
                  }
              }
          }
      }
  }
`;

問題是，我不知道如何正確地映射它。 我在架構中使用union，在查詢中使用片段以獲取所需信息，然后在頁面上呈現它。 據我所知，查詢數據是通過props傳遞的，那么我如何才能訪問聯合/片段中的props，以及如果可能的話，查詢中具有別名（如CustomArray value props？ 因為其中一個value是String，第二個是字符串數組，但是具有相同的name（ value ），所以我需要將其映射並放入其中一個別名以從api獲取數據。 我需要在地圖功能中使用地圖嗎？

{"items":[{"id":"1","custom_attributes":[{"__typename":"CustomString","value":"<p>The sporty Joust Duffle Bag can't be beat - not in the gym, not on the luggage carousel, not anywhere. Big enough to haul a basketball or soccer ball and some sneakers with plenty of room to spare, it's ideal for athletes with places to go.<p>\r\n<ul>\r\n<li>Dual top handles.</li>\r\n<li>Adjustable shoulder strap.</li>\r\n<li>Full-length zipper.</li>\r\n<li>L 29\" x W 13\" x H 11\".</li>\r\n</ul>"},{"__typename":"CustomString","value":"/m/b/mb01-blue-0.jpg"},{"__typename":"CustomString","value":"/m/b/mb01-blue-0.jpg"},{"__typename":"CustomString","value":"/m/b/mb01-blue-0.jpg"},{"__typename":"CustomString","value":"49"},{"__typename":"CustomArray"},{"__typename":"CustomString","value":"container1"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"joust-duffle-bag"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"no_selection"}],"__typename":"itemapi"},{"id":"2","custom_attributes":[{"__typename":"CustomString","value":"<p>The sporty Joust blablablablablablablablablbalbalblalbalbla not on the luggage carousel, not anywhere. Big enough to haul a basketball or soccer ball and some sneakers with plenty of room to spare, it's ideal for athletes with places to go.<p>\r\n<ul>\r\n<li>Dual top handles.</li>\r\n<li>Adjustable shoulder strap.</li>\r\n<li>Full-length zipper.</li>\r\n<li>L 29\" x W 13\" x H 11\".</li>\r\n</ul>"},{"__typename":"CustomString","value":"/m/b/mb01-blue-0.jpg"},{"__typename":"CustomString","value":"/m/b/mb01-blue-0.jpg"},{"__typename":"CustomString","value":"/m/b/mb01-blue-0.jpg"},{"__typename":"CustomString","value":"49"},{"__typename":"CustomArray"},{"__typename":"CustomString","value":"container1"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"joust-duffle-bag"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"0"},{"__typename":"CustomString","value":"no_selection"}],"__typename":"itemapi"}],"__typename":"Link"}

Answer 1

您可以修改查詢以包含__typename 。 假設custom_attributes是一個對象：

query ChannelsListQuery {
    allLinks {
        items {
            id
            custom_attributes {
                __typename
                ... on CustomString{
                    value             
                }
                ... on CustomArray{
                    aliasVar: value
                }
            }
        }
    }
}

Then inside your render function you can do something like this:
return (
  <div className="itemList">
    {
      allLinks.items.map(item => 
        <div key={item.id} className="items">
        {
          item.__typename === 'CustomString'
          ?  <div>{item.custom_attributes.value}</div>
          :  item.custom_attributes.aliasVar.map(v => <div key={v}>{v}</div>)
        }
        </div>
      )
    }
  </div>
);

另外， __typename ，您還可以檢查是否存在aliasVar屬性並相應地進行渲染，但是類型名是了解正在使用的數據形狀的一種可預測的方式。