Issue with product filtering using tags

[rkrueg]

For context, I’m using the Shopify Storefront API to build a headless site on a separate platform (Next.js). I’m building the product listing page which is the page that contains a paginated list of products with a filters menu. I have a number of filters I’d like to include that does not align with standard Shopify product fields (ex: capacity, composition, features, dimensions, etc.). From what I can tell, the appropriate way to solve this would be to utilize product tags and filter on those.

However, the difficulty comes when I’m trying to use the tags to build the actual filters menu. Since tags are simple strings, I’m having to prefix the value with a tag group value to determine which tag group the tag belongs to and use the tag value to represent the tag label that visually shows on the page. I'm then querying the productTags endpoint to evaluate this data to build the menu. The issue with this is that some of my tag values contain certain reserved character’s like apostrophe (‘), slash (/), and ampersand (&). These characters prevent the query to the API from working correctly.

For example, if a tag value that contains “Master’s Reserve” it returns all products that are tagged with “Master” or “Master’s Gauge” since that character seems to almost behave like some sort of wildcard character. I’ve even tried wrapping the query in quotes but the behavior does not seem to change. The below screenshot details a sample query of “word” which returns a product with the tag “word’345” despite not being an exact match.

Also, if there is a better design for building the filters menu other than using tag values to create the filter groups with the associated tag values, PLEASE let me know. This just sort of feels like a hacky way to solve this problem but I am unable to see another way using the API.

Thanks,

Ryan