Storefront API 'query' search syntax fails with non-ASCII characters (e.g., Æ Ø Å)

Hydrogen and Storefront APIs
1

Hey there,

This might be a known thing, or unrelated to the API, but I’m seeing some weird stuff using the API search syntax in the Storefront API.

I’m trying to query all products based off a static vendor name. This vendor name is ‘Siersbøl’ (ø is a letter in the danish language).

Example time:

const query = 
  query getProducts($first: Int, $search: String) {
    products(first: $first, query: $search) {
      edges {
        node {
          tags
          vendor
          id
        }
      }
    }
  }
;

const response = await fetch(${url}/api/2025-04/graphql.json, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Shopify-Storefront-Access-Token': '<access_token>'
  },
  body: JSON.stringify({
    query,
    variables: {
      first: 50, 
      search: 'vendor:Siersbøl'
    }
  })
});

const data = await response.json();

if (data.errors) {
  throw new Error(data.errors[0].message);
}

This returns 0 products

Running the following in Postman returns plenty products, and looks right:

query getProducts($first: Int, $search: String) {
  products(first: $first, query: $search) {
    edges {
      cursor
      node {
        tags
        vendor
        id
        variants(first: 250) {
          nodes {
            id
            sku
          }
        }
      }
    }
    pageInfo {
      hasNextPage
    }
  }
}

{
  "first": 50,
  "search": "vendor:Siersbøl"
}

What I’ve tried

  • Changing the query to vendor:Siersb* (this works, but can’t really use it)
  • Trying utils like 'vendor:Siersbøl'.normalize('NFC') and encodeURIComponent() (no luck)

I’m eventually fixing it by using another data point without danish letters, just thought it was weird.

2

Try this :
const response = await fetch(${url}/api/2025-04/graphql.json, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘X-Shopify-Storefront-Access-Token’: ‘<access_token>’
},
body: JSON.stringify({
query,
variables: {
first: 50,
search: ‘vendor:Siersb%C3%B8l’ // Encode ø as %C3%B8
}
})
});

as Encode ø as %C3%B8 will handle the special character or

const vendorName = ‘Siersbøl’;
const encodedVendor = encodeURIComponent(vendorName);
const response = await fetch(${url}/api/2025-04/graphql.json, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘X-Shopify-Storefront-Access-Token’: ‘<access_token>’
},
body: JSON.stringify({
query,
variables: {
first: 50,
search: vendor:${encodedVendor}
}
})
});

1 Like
3

I’ve already tried that. No luck :eyes: thanks tho!

4

Does this only happen with the Storefront API?

6

Does this only happen with the Storefront API?

Yes, Admin API via Postman/GraphiQL had no issues.