Store front Graph QL api not working on tag field with OR condition

[vish-pot]

Hi I'm trying to search products based on tag field using OR condition if any of the tag in list matches the product tags. But I see a weird issue, when I use the list of tags to be ['sweets','sweet','dates','traditional sweets','ghee mithai'] it yields 0 products but when I use the tags list to be ['sweets','sweet','dates','traditional sweets'] this yields products.

Here is the search query I'm using. Can someone provide me a solution? It looks like API issue

const query = `
          query searchProducts($query: String!, $first: Int) {
            search(query: $query, first: $first, types: PRODUCT) {
              edges {
                node {
                  ... on Product {
                    id
                    title
                    vendor
                    tags
                  }
                }
              }
            }
          }
        `;
        const vendorOrCollection = `vendor:${collectionHandle}`;
        const tags = productTags[category];
        
        // Create a combined query string
        //const tagQuery = tags.map(tag => `tag:${tag}`).join(' OR ');
        const tagQuery = tags.map(tag => `tag:${tag}`).join(' OR ');
        const searchQuery = `(${vendorOrCollection}) AND (${tagQuery})`;
        
        const variables = {
          query: searchQuery,
          first: 5
        };
        
        const url = `https://${SHOPIFY_STORE_DOMAIN}/api/2024-04/graphql.json`;
        
        const headers = {
          'Content-Type': 'application/json',
          'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN
        };
        
        const body = JSON.stringify({
          query,
          variables
        });
        
        fetch(url, {
          method: 'POST',
          headers: headers,
          body: body
        })
          .then(response => response.json())
          .then(data => {
            console.log(`Products in ${collectionHandle}:`, data.data.search.edges);
          })
          .catch(error => {
            console.error('Error:', error);
          });

[aaron_shopify · Accepted solution]

Hi!

From your code example, it looks like you may need to surround each tag in double quotes to ensure that the full string is being processed as part of the tag argument. Something like this:

const tagQuery = tags.map(tag => `tag:"${tag}"`).join(' OR ');

This seems to resolve the issue in my testing. Hopefully this helps!