@graphcommerce/storyblok-ui 10.1.0-canary.21 → 10.1.0-canary.23

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @graphcommerce/storyblok-ui
 
+## 10.1.0-canary.23
+
+### Patch Changes
+
+- [#2634](https://github.com/graphcommerce-org/graphcommerce/pull/2634) [`e1a7e85`](https://github.com/graphcommerce-org/graphcommerce/commit/e1a7e856669b792b5c7464a7585868b4c8107622) - Sync Storyblok content with the Visual Editor's selected language ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 10.1.0-canary.22
+
 ## 10.1.0-canary.21
 
 ## 10.1.0-canary.20

package/Config.graphqls

@@ -30,3 +30,16 @@ extend input GraphCommerceConfig {
   """
   storyblok: StoryblokConfig!
 }
+
+extend input GraphCommerceStorefrontConfig {
+  """
+  Storyblok language code to request for this storefront. Maps the storefront's
+  GraphCommerce locale to a Storyblok language version. When unset, the storefront's
+  GraphCommerce locale prefix is used as the language code, unless it matches the
+  default locale (in which case no `language` param is sent and Storyblok serves
+  its space-default language). Set this when the GraphCommerce default locale
+  differs from the Storyblok default language (e.g. GraphCommerce default `nl_NL`
+  while the Storyblok space default stays English).
+  """
+  storyblokLocale: String
+}

package/lib/fetch.ts

@@ -1,4 +1,5 @@
 import type { ApolloClient } from '@graphcommerce/graphql'
+import { storefrontConfig } from '@graphcommerce/next-ui'
 import {
   getStoryblokApi,
   type ISbStoriesParams,
@@ -18,6 +19,14 @@ export type FetchStoryOpts = {
    * into full story objects in the response (e.g. `row_button_link_list.links`).
    */
   resolveRelations?: string | string[]
+  /**
+   * Direct Storyblok language override. When set, takes precedence over the
+   * storefront-config based `storyblokLocale` and the locale-prefix fallback.
+   * Empty string means "no `language` param" — Storyblok serves its space
+   * default. Used by `useStoryblokState` to refetch in the editor's selected
+   * language.
+   */
+  language?: string
 }
 export type FetchStoriesParams = ISbStoriesParams & FetchStoryOpts
 
@@ -36,6 +45,18 @@ export const sbParams = (opts: FetchStoryOpts = {}) => {
   const lang = langPrefix(opts.locale)
   const defaultLang = langPrefix(opts.defaultLocale)
   const isDefault = !lang || lang === defaultLang
+  // Per-storefront override — lets projects map a GraphCommerce locale to a
+  // Storyblok language explicitly. Needed when the GC default locale differs
+  // from the Storyblok space's default language (e.g. GC default `nl_NL` while
+  // Storyblok stays English-default). When unset, fall back to the legacy
+  // locale-prefix heuristic.
+  const explicitLanguage = storefrontConfig(opts.locale)?.storyblokLocale
+  // Direct override has highest priority. Empty string = no `language` param
+  // (Storyblok serves its default language).
+  const language =
+    opts.language !== undefined
+      ? opts.language || undefined
+      : (explicitLanguage ?? (!isDefault ? lang : undefined))
 
   const resolveRelations = Array.isArray(opts.resolveRelations)
     ? opts.resolveRelations.join(',')
@@ -49,7 +70,7 @@ export const sbParams = (opts: FetchStoryOpts = {}) => {
     resolve_links: 'story' as const,
     ...(resolveRelations && { resolve_relations: resolveRelations }),
     ...(isDev && { cv: Date.now() }),
-    ...(!isDefault && { language: lang }),
+    ...(language && { language }),
   }
 }
 

package/lib/useStoryblokState.ts

@@ -5,6 +5,7 @@ import {
   type SbBlokData,
 } from '@storyblok/react'
 import { useEffect, useRef, useState } from 'react'
+import { fetchStory } from './fetch'
 import { resolveStoryblokProducts } from './resolveProducts'
 
 export type UseStoryblokStateOptions = {
@@ -14,6 +15,14 @@ export type UseStoryblokStateOptions = {
    * fully resolved by `fetchStory` in `getStaticProps`.
    */
   skip?: boolean
+  /**
+   * Storyblok language code the Visual Editor is currently showing. When
+   * different from `initialStory`'s language, the hook refetches the story
+   * in this language on mount so the editor preview matches the editor's
+   * sidebar selection regardless of which GraphCommerce storefront the page
+   * renders in. Empty string means "Storyblok-default language".
+   */
+  editorLanguage?: string
 }
 
 /**
@@ -22,18 +31,52 @@ export type UseStoryblokStateOptions = {
  * `magento_category_id` fields are changed.
  *
  * The generic `T` lets the caller narrow the returned `content` to an auto-generated Storyblok
- * content type. The runtime check guards against feeding in a story whose content isn't a `page`.
+ * content type.
  */
 export function useStoryblokState<T = SbBlokData>(
   initialStory: ISbStoryData | null,
   options: UseStoryblokStateOptions = {},
 ): ISbStoryData<T> | null {
-  const { skip = false } = options
+  const { skip = false, editorLanguage } = options
   const story = useStoryblokStateBase(initialStory, { resolveLinks: 'story' })
   const client = useApolloClient()
   const [resolvedStory, setResolvedStory] = useState(story)
   const prevStoryRef = useRef(story)
 
+  // Editor language refetch: Storyblok's bridge doesn't proactively push
+  // content on language switches (only on field edits), and preview cookies
+  // can't reach getStaticProps from third-party iframes. So when the editor's
+  // language differs from the initial SSR fetch we refetch client-side once.
+  useEffect(() => {
+    if (skip || editorLanguage === undefined || !initialStory?.full_slug) return
+    const target = editorLanguage || 'default'
+    const current = initialStory.lang ?? 'default'
+    if (target === current) return
+
+    // Storyblok's `full_slug` is prefixed with the language folder (e.g.
+    // `nl/home`). Strip it so the refetch targets the canonical story
+    // regardless of which language we're switching to.
+    const lang = initialStory.lang
+    const baseSlug =
+      lang && lang !== 'default' && initialStory.full_slug.startsWith(`${lang}/`)
+        ? initialStory.full_slug.slice(lang.length + 1)
+        : initialStory.full_slug
+
+    let cancelled = false
+    fetchStory(baseSlug, { preview: true, language: editorLanguage }, client).then(
+      (result) => {
+        if (cancelled) return
+        const fetched = result.data?.story
+        if (!fetched) return
+        prevStoryRef.current = fetched
+        setResolvedStory(fetched as typeof story)
+      },
+    )
+    return () => {
+      cancelled = true
+    }
+  }, [skip, editorLanguage, initialStory, client])
+
   useEffect(() => {
     if (skip) return
     if (prevStoryRef.current === story) return
@@ -53,16 +96,5 @@ export function useStoryblokState<T = SbBlokData>(
   }, [skip, story, client])
 
   const finalStory = skip ? initialStory : resolvedStory
-
-  if (!finalStory) return null
-  if (finalStory.content?.component === 'page') {
-    return finalStory as ISbStoryData<T>
-  }
-
-  if (process.env.NODE_ENV === 'development') {
-    throw new Error(
-      `useStoryblokState: expected story content of type 'page' but got '${finalStory.content?.component}' for slug '${finalStory.full_slug}'. Use the upstream @storyblok/react useStoryblokState for non-page content.`,
-    )
-  }
-  return null
+  return (finalStory as ISbStoryData<T> | null) ?? null
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/storyblok-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.1.0-canary.21",
+  "version": "10.1.0-canary.23",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,13 +12,13 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.21",
-    "@graphcommerce/graphql": "^10.1.0-canary.21",
-    "@graphcommerce/image": "^10.1.0-canary.21",
-    "@graphcommerce/magento-product": "^10.1.0-canary.21",
-    "@graphcommerce/next-ui": "^10.1.0-canary.21",
-    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.21",
-    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.21",
+    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.23",
+    "@graphcommerce/graphql": "^10.1.0-canary.23",
+    "@graphcommerce/image": "^10.1.0-canary.23",
+    "@graphcommerce/magento-product": "^10.1.0-canary.23",
+    "@graphcommerce/next-ui": "^10.1.0-canary.23",
+    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.23",
+    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.23",
     "@mui/material": "^7.0.0",
     "@storyblok/react": "^6.0.0",
     "react": "^19.2.0",