GraphQL & Relay Filtering Interface

Question

PROBLEMS

If you were to create a Google Calendar using relays, how would you structure your GraphQL schema and relays containers / components to properly handle display and hide multiple calendars?

ATTEMPT

You can imagine such a scheme:

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

So, I can pull out all the calendars and all the events, or a specific calendar, or what you have.

Structuring containers and relay components, I would suggest the following:

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

Thus, the CalendarView relay container configures the fragment requesting calendars, and the CalenderView component uses setVariables to switch the display / hide of this calendar in the view.

The problem that I am facing (and which makes my head spin) is that the components of Day / Week / Month / Agenda are combinatorial representations, that is, they require data from all selected events.

PLOT THICKNESS

Now that sounds just fine - set CalendarView variables to calendarId and pass the resulting events down, right? Well ... sort of. Now the fragment for CalendarView is built with a set of calendarIds , so turning on or off one calendar changes the whole tree of what should be selected.

THE GOTCHA?

As far as I can tell, the relay sees each calendarIds combination as a completely different selection. So, when I switch to the new id , it retrieves all the events, even for those calendars that I have already selected.

Put the code:

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

This is a completely different sample from:

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

This is bad. There may be many events on these calendars, and over-sampling is a killer.

In theory, I could create a container for each calendar, but then how would I combine the events in these calendars and combine them into a common subcomponent? Calendars cannot be layered because events must move in response to other events, even on individual calendars (left / right shift to show them side by side).

Thoughts? My brain hurts.

Answer 1

Put the code, calendar(calendarIds: [1, 2]) is a completely different request from calendar(calendarIds: [1, 2, 3])

Yeah. GraphQL does not assign field arguments to semantics, so Relay (or any other GraphQL client) does not know that calendarIds arguments correspond to result identifiers. This is a fairly common use case, however, that Relay supports a special root field, nodes(ids: [ID!]) (In the Query type), which is processed as you would expect. To use it, enter the nodes field in your schema, which returns the results as an array, the order of which coincides with the input order of the input identifiers, with zero values ​​for any results that cannot be loaded. For instance. if the input identifiers are [1,2,3] , you should return [result1, result2, result3] . When using this field, Relay will argue the arguments against previously received data (because it makes the assumption that the arguments of this particular field have semantic meaning as identifiers).