GraphQL和中繼過濾UI

Question

提示

如果您使用中繼構建Google日歷，您將如何構建GraphQL架構和中繼容器/組件以正確處理顯示和隱藏多個日歷？

試圖

有人可能會想到這樣的架構：

viewer {
  user {
    calendars(calendarIds: [String]) {
      edges,
        node {
          name,
          id,
          events(dates: [Date]) {
            ... edges, node, eventinfo...
          }
        }
      }
    }
  }
}

所以，我可以下載所有日歷和所有活動，或特定日歷，或者你有什么。

構建中繼容器和組件，我想象如下：

<CalendarView Container>
  <CalendarView>
    <WeekView> or <MonthView> or <Agenda> etc...
      <Event>

這樣CalendarView中繼容器設置請求日歷的片段，而CalenderView組件使用setVariables來切換視圖中該日歷的顯示/隱藏。

我遇到的問題（這讓我頭暈目眩）是Day / Week / Month / Agenda組件是組合視圖 - 也就是說，它們需要來自所有選定事件的數據。

地圖厚度

現在，這聽起來很好 - 讓CalendarView設置calendarId變量並將結果事件傳遞下來，對吧？ 嗯...有點兒。 現在， CalendarView的片段由一組calendarIds ，因此打開或關閉一個calendar更改要獲取的整個樹。

GOTCHA？

據我所知，relay將calendarIds每個組合視為完全不同的提取。 因此，當我切換一個新的id它會獲取所有事件，即使對於我已經提取的那些日歷也是如此。

放入代碼：

fragment calendar(calendarIds: [1, 2]) { ... } 

是完全不同的取得：

fragment calendar(calendarIds: [1, 2, 3]) { ... }

這是不好的。 這些日歷上可能會有很多事件，並且過度獲取是一個殺手。

從理論上講，我可以為每個日歷創建一個容器，但是如何將這些日歷上的事件組合在一起並將它們組合成一個公共子組件？ 日歷無法分層，因為事件需要四處移動以響應其他事件，即使是在不同日歷上的事件（向左/向右移動以並排顯示它們）。

思考？ 我的腦袋疼。

Answer 1

放置代碼， calendar(calendarIds: [1, 2])是一個完全不同的calendar(calendarIds: [1, 2, 3])查詢calendar(calendarIds: [1, 2, 3])

對。 GraphQL沒有為字段參數賦予語義，因此Relay（也沒有任何其他GraphQL客戶端）不知道calendarIds參數對應於結果的id。 但是，這是一個常見的用例，即Relay支持特殊nodes(ids: [ID!])根域（在Query類型上），它們按照您的預期處理。 要使用它，請在模式中實現一個nodes字段，該字段將結果作為一個數組返回，該數組的順序與輸入ID的順序相匹配，對於任何無法加載的結果都使用null條目。 例如，如果輸入id為[1,2,3] ，則返回[result1, result2, result3] 。 使用此字段時，Relay將針對先前獲取的數據區分參數參數（因為它假設此特定字段的參數具有ids的語義含義）。