import { getSelectedProductOptions } from '@weaverse/hydrogen'

function getSelectedProductOptions(
  request: Request
): SelectedOptionInput[]

https://example.com/products/t-shirt?Color=Blue&Size=XL&isDesignMode=true

const selectedOptions = getSelectedProductOptions(request)

[
  { "name": "Color", "value": "Blue" },
  { "name": "Size", "value": "XL" }
]

?option[Color]=Blue&option[Size]=XL

[
  { "name": "option[Color]", "value": "Blue" },
  { "name": "option[Size]", "value": "XL" }
]

import { getSelectedProductOptions } from '@weaverse/hydrogen'
import type { LoaderFunctionArgs } from 'react-router'

export async function loader({
  request,
  context,
  params,
}: LoaderFunctionArgs) {
  const selectedOptions = getSelectedProductOptions(request)

  const { product } = await context.storefront.query(PRODUCT_QUERY, {
    variables: {
      handle: params.handle,
      selectedOptions,
    },
  })

  return { product }
}