How do I filter Relay results based on values in fields on Connected Types?

Question

This question is more about a pattern I keep encountering than a specific instance of the problem.

Often I'll have a Relay container that executes a query like this:

getUserGroup(id: $id) {
    users {
      edges {
        node {
          widgets {
            edges {
              node {
                id
                widgetTags {
                  edges {
                    node {
                      tagName
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

In other words: I want to render the data in a WidgetList component like so:

// WidgetList.js
User1:
  Widget1: 
    TagA
    TagB
   Widget2: 
    TagA
    TagC
User 2: 
   // ..etc etc

My goal is to filter the Widget results based on their WidgetTags

My problem is that, in order to filter, I think I need all of the WidgetTag information at the parent level. Because not every Widget has any Tags, I have to enter the query from the User side.

How should one handle a pattern like this with Relay?

The options I've tried so far are:

1. Centralize any data I want to filter-on using a state management app like Mobx. Each Widget adds its own data to the store upon render and with each update, then the store is used to filter the array of Widgets in the WidgetList render() function.

2. I manually pluck the relevant data from the query results at the WidgetList level, then carry out the same filtration steps as in step 1.

Neither of these feel in accordance with Relay best practices, though, so I'm wondering if there isn't a better way.

Answer 1

You can add an argument to you widgets field. For example, you could add an argument "withTags" that takes as input an array of tags and only returns widgets which have theses tags: widgets(withTags: ['Sports', 'Art'])

How does that sound to you?