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

Retired Boards Appdev New Graphql Product Apis

Topic summary

A developer is experiencing inconsistent behavior with Shopify’s Storefront GraphQL API when searching products by tags using OR conditions.

The Issue:

  • Tag list ['sweets','sweet','dates','traditional sweets','ghee mithai'] returns 0 products
  • Tag list ['sweets','sweet','dates','traditional sweets'] (without ‘ghee mithai’) returns products successfully
  • The problem appears when tags contain spaces (e.g., ‘ghee mithai’)

Proposed Solution:
A Shopify representative suggested wrapping each tag in double quotes when constructing the query:

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

This ensures multi-word tags are processed correctly as complete strings rather than being split. The solution reportedly resolved the issue in testing.

Status: The thread appears resolved with a working code fix provided.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

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);
          });
2

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!