Current getSelectedProductOptions leads to unknown variant options

[frandiox]

Problem

First issue reported in #1565

The query for product + selectedVariant in a PDP page fails when there are unknown query string params like &foo=bar.

We are using all the query string parameters to request the selected variant to the Storefront API. However, the API can't find the variant when there are unknown params (such as &foo=bar). Then, we redirect to the first variant in the product but keep adding the existing query string parameters (&foo=bar)... which enters in an infinite loop of redirect => can't find variant => redirect => can't find variant.

It looks like we noticed this in the starter template but we only filtered out known unrelated query params:

hydrogen/templates/skeleton/app/routes/products.$handle.tsx

Lines 38 to 48 in 081b41e

	const selectedOptions = getSelectedProductOptions(request).filter(
	(option) =>
	// Filter out Shopify predictive search query params
	!option.name.startsWith('_sid') &&
	!option.name.startsWith('_pos') &&
	!option.name.startsWith('_psq') &&
	!option.name.startsWith('_ss') &&
	!option.name.startsWith('_v') &&
	// Filter out third party tracking params
	!option.name.startsWith('fbclid'),
	);

I'm fixing the most obvious problem (redirect fails with unknown params) in #1570.
However, the product.selectedVariant still comes as undefined because the Storefront API doesn't understand unknown params. I think this is essentially an issue with Hydrogen's getSelectedProductOptions, which expects a request and it simply reads all its query params without filtering. Given that variant options are arbitrary set by the developer, we can't filter in getSelectedProductOptions without knowing what to look for.

Possible solutions

1. Remove getSelectedProductOptions

Remove this utility and just let the user handle the query params in the loader. This way, they must only select known params before requesting the variant to the Storefront API.

2. Add a filter in getSelectedProductOptions

Ask the user to pass an array of known params that we use to filter.

3. Change how we handle query params in getSelectedProductOptions

Instead of using 1 query param for each variant option, we could adopt adding all the variant options under a known query param key. Examples:

• Aggregate all in 1 param: ?variant=size:154cm;Binding+mount:Nested;Material:Carbon-fiber&foo=bar
  This way, we just need to read variant and parse its content, ignoring unknown query strings. The format of the variant=... param could be changed as we see fit, this is just a quick example.
• Use multiple instances of the param: ?variant-option=size:154cm&variant-option=Binding+mount:Nested&variant-option=Material:Carbon-fiber&foo=bar
  This would give us an array when reading variant-option like ['size:154cm', 'Binding+mount:Nested', 'Material:Carbon-fiber']. We can then parse that and add these params to the query.

---

I would go with 3 but it's a breaking change.

[frandiox]

So it looks like the Storefront API has a new ignoreUnknownOptions option to ignore unknown query strings, so we probably just need to set that option instead of filtering out params: https://shopify.dev/docs/api/storefront/2024-01/objects/Product#field-product-variantbyselectedoptions . We'll start using this when upgrading to v2024-01.