Different data structures for filters - eg. structures I could use in my redux store to represent filter state

filterDataStructures.js

// concepts : 
// a filterName is the name of the filter, like color or category
// the filter values each have a name, value, and priority
//    name = a display name for the filter option
//    value = uid or other identifyer for filter option
//    priority = the order in which the filter option was applied, since filters applied first have a different impact on the URL and other SEO related features

// SOLUTION 1 : 
// this structure supports the idea that grouping by filter (ie. category 1 or color) is more important than grouping by filter priority

// UPSIDES :
// this one makes it easier to group by filter, eg. all filters under filter2 are already grouped for you
// in addition to that, it's less work to transform the filters to and from the structure returned by graphql
// DOWNSIDES :
// the downside is that it's harder to get information about the priority of filters -- they need to be flattened before reading in order of priority and they won't be in implicit order
// this also means we have to do extra work to write the priority in and out of the data structure (not so hard I think)
const structure1 = [
    {
        name: 'filter1',
        values : [
            {
                name: 'val1',
                value: 'val-1',
                priority: 1
            }
        ]
    }, {
        name: 'filter2',
        values : [
            {
                name: 'val2',
                value: 'val-2',
                priority: 2
            }, {
                name: 'val3',
                value: 'val-3',
                priority: 3
            }
        ]
    }
];

// SOLUTION 2 : 

// UPSIDES :
// these will be in implicit order of priority - in fact we wouldn't even need the priority field, we could rely on index
// DOWNSIDES :
// we have to transform the filters from their natural order
// we have to do extra work to group by filter name

const structure2 = [
    {
        filterName: 'filter1',
        filterValueName: 'val1',
        value: 'val-1',
        priority: 1
    }, {
        filterName: 'filter2',
        filterValueName: 'val2',
        value: 'val-2',
        priority: 2
    }, {
        filterName: 'filter2',
        filterValueName: 'val3',
        value: 'val-3',
        priority: 3
    }
];

// DECISION :
// I am going to go with the top solution - in the natural order returned by graphQL
// in addition to that, I need to introduce the concept of a priority into the applied filters coming from GraphQL and the query builder
// this is because I won't be able to determine which applied filter has the higher priority in the case of two or more applied attributes (ie. which one becomes the query param) without re-writing the query parsing logic.