Merge pull request #122 from focusreactive/fix/storyblok-preview-locale

fix(storyblok): pass the locale through to the live preview

Author: SearheiParkhamchuk

apps/storyblok/src/app/live-preview/[[...slug]]/page.tsx

@@ -2,20 +2,33 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { StoryblokStory } from "@storyblok/react/rsc";
 
-import { fetchStory, fetchStoryMetadata } from "@/lib/storyblok";
+import { splitLanguageFromSlug } from "@/constants/languages";
+import {
+  fetchLanguageCodes,
+  fetchStory,
+  fetchStoryMetadata,
+} from "@/lib/storyblok";
 import CoreLayout from "@/components/CoreLayout";
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
   const params = await props.params;
+  const { language, slug } = splitLanguageFromSlug(
+    params.slug,
+    await fetchLanguageCodes(),
+  );
 
-  return fetchStoryMetadata("draft", params.slug);
+  return fetchStoryMetadata("draft", slug, language);
 }
 
 export default async function Home(props: Props) {
   const params = await props.params;
+  const { language, slug } = splitLanguageFromSlug(
+    params.slug,
+    await fetchLanguageCodes(),
+  );
   const {
     data: { story, links },
-  } = await fetchStory("draft", params.slug);
+  } = await fetchStory("draft", slug, language);
 
   if (!story || process.env.NEXT_PUBLIC_IS_PREVIEW !== "true") {
     notFound();

apps/storyblok/src/constants/languages.ts

@@ -0,0 +1,19 @@
+// Storyblok preview URLs are {domain}/{language}/{slug}, but the space translates
+// fields, not slugs, so the language must travel as the `language` query param.
+export function splitLanguageFromSlug(
+  slug: string[] | undefined,
+  languageCodes: readonly string[],
+): {
+  language?: string;
+  slug?: string[];
+} {
+  const [first, ...rest] = slug ?? [];
+
+  if (!first || !languageCodes.includes(first)) {
+    return { slug };
+  }
+
+  // undefined, not []: `fetchStory` falls back to "home" only on a falsy slug, and
+  // an empty path segment hits the delivery API's list endpoint instead of a story.
+  return { language: first, slug: rest.length > 0 ? rest : undefined };
+}

apps/storyblok/src/lib/storyblok.ts

@@ -1,10 +1,13 @@
 import type { Metadata } from "next";
 import { apiPlugin, storyblokInit } from "@storyblok/react/rsc";
 
+import { SB_CACHE_VERSION_TAG } from "@/constants/cacheTags";
 import { COMPONENTS } from "@/constants/sbComponents";
 
 import { fetcher, getNextCachingParams } from "./utils";
 
+const LANGUAGE_CODES_REVALIDATE_SECONDS = 3600;
+
 export const getStoryblokApi = storyblokInit({
   accessToken: process.env.NEXT_PUBLIC_STORYBLOK_TOKEN,
   use: [apiPlugin],
@@ -14,6 +17,7 @@ export const getStoryblokApi = storyblokInit({
 export async function fetchStory(
   version: "draft" | "published",
   slug?: string[],
+  language?: string,
 ) {
   getStoryblokApi();
   const correctSlug = `/${slug ? slug.join("/") : "home"}`;
@@ -23,6 +27,10 @@ export async function fetchStory(
     token: process.env.NEXT_PUBLIC_STORYBLOK_TOKEN || "",
   });
 
+  if (language) {
+    searchParams.set("language", language);
+  }
+
   const data = await fetcher(
     `${process.env.NEXT_PUBLIC_STORYBLOK_API_GATE}/stories${correctSlug}?${searchParams.toString()}`,
     {
@@ -57,13 +65,44 @@ export async function fetchStories(
   return data;
 }
 
+// Empty means "could not determine" as well as "no languages", and the caller must
+// strip nothing in either case. A hardcoded fallback would instead serve the wrong
+// story under a 200 — the failure nobody notices.
+export async function fetchLanguageCodes(): Promise<string[]> {
+  const searchParams = new URLSearchParams({
+    token: process.env.NEXT_PUBLIC_STORYBLOK_TOKEN || "",
+  });
+
+  try {
+    const { data } = await fetcher(
+      `${process.env.NEXT_PUBLIC_STORYBLOK_API_GATE}/spaces/me?${searchParams.toString()}`,
+      {
+        method: "GET",
+        next: {
+          revalidate: LANGUAGE_CODES_REVALIDATE_SECONDS,
+          tags: [SB_CACHE_VERSION_TAG],
+        },
+      },
+    );
+
+    // `fetcher` does not check `response.ok`, so a 401 arrives here as a parsed body
+    // with no `space` key rather than as a thrown error.
+    return Array.isArray(data?.space?.language_codes)
+      ? data.space.language_codes
+      : [];
+  } catch {
+    return [];
+  }
+}
+
 export async function fetchStoryMetadata(
   version: "draft" | "published",
   slug?: string[],
+  language?: string,
 ) {
   const {
     data: { story },
-  } = await fetchStory(version, slug);
+  } = await fetchStory(version, slug, language);
 
   if (!story) {
     console.log(`missing metadata for story: ${slug?.join("/")}`);