Filter working in iQL GUI, but not working when querying the Storefront API from my frontend

[trei]

I’m trying to filter products as described in this documentation from Shopify, but when I query the application from my frontend it returns all items, not just the filtered ones.

Expected behavior: provide Storefront API with a collection query with a filter on products; returns a list of filtered products.

Here’s a working example from the gui:

Actual behavior:

I connect to the storefront API:

const res = await shopifyFetch({
      query: getCollectionProductsQuery,
      variables: {
        handle: collection,
        reverse,
        sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey,
        filters: filter
      }
    });

and pass it this query:

export const getCollectionProductsQuery = /* GraphQL */ `
  query getCollectionProducts(
    $handle: String!
    $sortKey: ProductCollectionSortKeys
    $reverse: Boolean
    $filter: [ProductFilter!]
  ) {
    collection(handle: $handle) {
      products(filters: $filter, sortKey: $sortKey, reverse: $reverse, first: 100) {
        edges {
          node {
            ...product
          }
        }
      }
    }
  }
  ${productFragment}
`;

I test to make sure that the variables are being passed to the function and they seem to be:

export async function getCollectionProducts({
    collection,
    reverse,
    sortKey,
    filter
  }){
    const res = await shopifyFetch({
      query: getCollectionProductsQuery,
      // tags: [TAGS.collections, TAGS.products],
      variables: {
        handle: collection,
        reverse,
        sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey,
        filters: filter
      }
    });
    console.log('Collection:', collection)
    console.log('Filter:', filter)
}

//Console output:

Collection: clothing
Filter: { variantOption: { name: 'color', value: 'Samurai Sunrise' } }

Yet I still receive all of the products underneath clothing when I get the data:

//Console output of component making the collection query:

OG Logo Tee - Long Sleeve
OG Logo Tee - Short Sleeve

(To be clear, it should not be returning OG Logo Tee - Short Sleeve.)

I’m hoping this is a problem with the syntax that I’m using, I’m unsure if the query has been written appropriately, or if I’m even passing the variables properly. Please let me know what I can do! Thanks!