GraphQL query for variants with unique option values (Express.js)

Retired Boards Appdev Graphql Basics And Troubleshooting
1

I’m trying to set up a display of our different colors available by variant in store. Our Variant options are Color as option1 and Size as option2. What that means is that when I make a query for some amount of variants I always get back something that looks like this:

variant index option1 option2
1 Blue S
2 Blue M
3 Blue L
4 Red S

and so on…

This is really costly for us and inefficient to need to filter on the front-end

Is there a way to set up a query for product variants with unique option1 values?

Desired output:

variant index option1 option2
1 Blue
2 Red
3 Green
4 Yellow

I did attempt to set up a query for one type of option2 value already (e.g. “option2:S”), but unfortunately not all of our products use the S-M-L sizing. Shoes for example use numbers so I want to avoid needing to define option2 and just find unique option1’s.

Here is what my query currently looks like:

await fetch(`${url}/graphql.json`, {
    method: 'POST',
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      query: `{
        products(first: 20, query: "${query}") {
          edges {
            node {
              title
              vendor
              id
              priceRangeV2 {
                minVariantPrice {
                  amount
                }
                maxVariantPrice {
                  amount
                }
              }
              variants(first: 10) {
                edges { 
                  node {
                    selectedOptions {
                      name
                      value
                    }
                    image {
                      url
                    }
                  }
                }
              }
            }
          }
        }
      }`
    })
  })
2

I realized im super dumb and sorted out the issue. Just used the images query to gather the images available to each product.

await fetch(`${url}/graphql.json`, {
    method: 'POST',
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      query: `{
        products(first: 20, query: "${query}") {
          edges {
            node {
              title
              vendor
              id
              priceRangeV2 {
                minVariantPrice {
                  amount
                }
                maxVariantPrice {
                  amount
                }
              }
              images(first:10) {
                edges {
                  node {
                    url
                  }
                }
              }
            }
          }
        }
      }`
    })
  })