Merge pull request #608 from storyblok/fix/conditional-story-id

fix: add conditional story id for Gatsby use case in useStoryblokState
storyblok · Jul 5, 2023 · c2097aa · c2097aa
2 parents 4287d4e + 2df724a
commit c2097aa
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/lib/common/client.ts b/lib/common/client.ts
@@ -4,7 +4,8 @@ import { registerStoryblokBridge } from "@storyblok/js";
 
 export const useStoryblokState: TUseStoryblokState = (
   initialStory = null,
-  bridgeOptions = {}
+  bridgeOptions = {},
+
 ) => {
   let [story, setStory] = useState(initialStory);
 
@@ -16,10 +17,12 @@ export const useStoryblokState: TUseStoryblokState = (
     return initialStory;
   }
 
+  const id = (story as any).internalId || story.id;
+
   useEffect(() => {
     setStory(initialStory);
     registerStoryblokBridge(
-      story.id,
+      id,
       (newStory) => setStory(newStory),
       bridgeOptions
     );

diff --git a/lib/story.tsx b/lib/story.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, {forwardRef} from "react";
+import React, { forwardRef } from "react";
 import { useStoryblokState } from "./common/client";
 import StoryblokComponent from "./common/storyblok-component";
 import { ISbStoryData } from "./types";
@@ -10,9 +10,12 @@ interface StoryblokStoryProps {
   [key: string]: unknown;
 }
 
-const StoryblokStory =  forwardRef<HTMLElement, StoryblokStoryProps>(
+const StoryblokStory = forwardRef<HTMLElement, StoryblokStoryProps>(
   ({ story, ...restProps }, ref) => {
-    story = useStoryblokState(story); 
+    if (typeof story.content === "string") {
+      story.content = JSON.parse(story.content);
+    }
+    story = useStoryblokState(story);
     return <StoryblokComponent ref={ref} blok={story.content} {...restProps} />;
   }
 );