GraphQL & Relay Filtering UI

Question

wierszu

Jeśli było zbudować Kalendarza Google za pomocą przekaźnika, w jaki sposób zorganizować schemat GraphQL i pojemniki Przekaźnik/komponenty prawidłowo obsługiwać pokazując & ukrywa wiele kalendarzy?

PRÓBA

Można by sobie wyobrazić schemat takiego:

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

Więc mogę ciągnąć w dół wszystkie kalendarze i wszystkie zdarzenia lub specjalnego kalendarza, lub co cię mieć .

Kształtowanie pojemniki i elementy przekaźnikowe, to sobie wyobrazić następujące:

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

, że pojemnik przekaźnik CalendarView tworzy fragment wzywający kalendarze oraz komponent CalenderView wykorzystuje setVariables aby włączyć Wykazywanie/ukrywanie tego kalendarza w widoku.

Problem, który mam napotykając (a to, że mój zawrót głowy) jest to, że Day/Week/Month/Agenda elementy są kombinatoryczne widoki - to znaczy, że wymagają dane z wszystkich wybranych zdarzeń.

działki zgęstnieje

Teraz to brzmi dobrze - mają CalendarView ustawić zmienne calendarId i przekazać zdarzeń powstałych w dół, prawda? Cóż ... trochę. Teraz fragment dla CalendarView jest skonstruowany z zestawem calendarIds, tak że włączanie lub wyłączanie jednego calendar zmienia całe drzewo tego, co ma zostać pobrane.

GOTCHA?

O ile mogę stwierdzić, przekaźnik widzi każdą kombinację calendarIds jako zupełnie inne pobranie. Tak więc, gdy przełączam się na nowe id, pobiera się zdarzenia, nawet te kalendarze, które już zostały pobrane.

Put kod mądry:

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

jest całkowicie inny pobrać z:

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

... Jest źle. W tych kalendarzach może być dużo wydarzeń, a nadmiar jest zabójcą.

Teoretycznie mógłbym utworzyć kontener na kalendarz, ale w jaki sposób połączyć wydarzenia w tych kalendarzach i połączyć je w wspólny pod-komponent? Kalendarzy nie można ułożyć warstwowo, ponieważ zdarzenia muszą się poruszać w reakcji na inne zdarzenia, nawet te w osobnych kalendarzach (przesuwanie w lewo/w prawo, aby wyświetlać je obok siebie).

Myśli? Mój mózg boli.

Answer 1

kod mądry Put, calendar(calendarIds: [1, 2]) jest zupełnie inna zapytań od calendar(calendarIds: [1, 2, 3])

Tak. GraphQL nie przypisuje semantyki do argumentów pól, więc Relay (ani żaden inny klient GraphQL) nie wie, że argumenty calendarIds odpowiadają identyfikatorom wyników. Jest to dość powszechny przypadek użycia, ale Relay obsługuje specjalne pole główne nodes(ids: [ID!]) (w typie Zapytania), które jest traktowane zgodnie z oczekiwaniami. Aby z niego skorzystać, zaimplementuj w swoim schemacie pole nodes, które zwraca wyniki jako tablicę, której kolejność jest zgodna z identyfikatorami danych wejściowych, z wartościami zerowymi dla jakichkolwiek wyników, których nie można załadować. Na przykład. jeśli identyfikatory wejściowe to [1,2,3], zwrócisz [result1, result2, result3]. Używając tego pola, Relay zmieni argumenty argumentów na poprzednio pobrane dane (ponieważ przyjmuje założenie, że argumenty tego konkretnego pola mają semantyczne znaczenie jako ids).