Feat [Shopify]: Internationalization Support for Shopify Loaders and Queries

[yuriassuncx]

What is this Contribution About?

This PR introduces internationalization (i18n) support for the main Shopify queries and loaders used in Deco.cx. With this update, it's now possible to dynamically pass languageCode and countryCode values via the @inContext directive, allowing the Shopify Storefront API to return localized content for different languages and regions.

---

🧩 How It Works

✅ Loaders

Most loaders now accept the following optional props:

/**
 * @title Language Code
 * @description Language code for the storefront API
 * @example "EN" for English, "FR" for French, etc.
 */
languageCode?: LanguageCode;

/**
 * @title Country Code
 * @description Country code for the storefront API
 * @example "US" for United States, "FR" for France, etc.
 */
countryCode?: CountryCode;

These values are passed as variables to GraphQL queries and injected using the @inContext directive.

---

✅ Queries

All core Shopify queries have been refactored to use GraphQL variables in the @inContext directive (instead of interpolated JavaScript), making them fully compatible with GraphQL tooling and static code analysis like GraphQL Codegen.

Example:

query GetProduct(
  $handle: String, 
  $identifiers: [HasMetafieldsIdentifier!]!,
  $languageCode: LanguageCode,
  $countryCode: CountryCode
) @inContext(language: $languageCode, country: $countryCode) {
  product(handle: $handle) {
    ...Product
  }
}

On the TypeScript side, the variables are passed like this:

variables: {
  handle,
  identifiers: metafields,
  languageCode,
  countryCode,
}

---

🛠 Affected Queries

This pattern has been applied consistently across the following queries:

• ListProducts
• SearchProducts
• ProductsByCollection
• ProductRecommendations
• GetProduct (and related queries)
• Shop
• Cart

These changes improve maintainability, tooling support (e.g., GraphQL Codegen), and ensure proper localization behavior across storefront queries.

🌍 Impact

• Native internationalization support: Enables fully localized storefront experiences based on user preferences or geolocation.
• Global readiness: Makes it easier to scale storefronts across multiple markets without duplicating logic.
• Backward compatible: All new props are optional, ensuring existing implementations won’t break.
• Improved DX (Developer Experience): Unified and transparent use of inContext across queries and loaders.

Loom Video

https://www.loom.com/share/8a8f204de9a745528ac2f84f44f428fa

[github-actions]

Tagging Options

Should a new tag be published when this PR is merged?

• 👍 for Patch 0.73.1 update
• 🎉 for Minor 0.74.0 update
• 🚀 for Major 1.0.0 update