Mkt 4848 live preview support

.env.sample

@@ -8,9 +8,10 @@ CONTENTSTACK_DELIVERY_TOKEN= YOUR_DELIVERY_TOKEN
 CONTENTSTACK_ENVIRONMENT= YOUR_PUBLISHING_ENVIRONMENT
 
 # For live preview 
-CONTENTSTACK_MANAGEMENT_TOKEN=YOUR_MANAGEMENT_TOKEN 
+CONTENTSTACK_PREVIEW_TOKEN=YOUR_PREVIEW_TOKEN
 CONTENTSTACK_API_HOST=api.contentstack.io
 CONTENTSTACK_APP_HOST=app.contentstack.com
+CONTENTSTACK_PREVIEW_HOST=YOUR_PREVIEW_HOST #rest-preview.contentstack.com
 
 CONTENTSTACK_LIVE_PREVIEW=true
 CONTENTSTACK_LIVE_EDIT_TAGS=false

package.json

@@ -2,14 +2,14 @@
   "name": "contentstack-gatsby-starter-app",
   "private": true,
   "description": "A simple starter app build using Gatsby and Contentstack",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "author": "Contentstack",
   "dependencies": {
     "@contentstack/live-preview-utils": "^1.4.0",
     "@contentstack/utils": "^1.1.1",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.1.3",
-    "contentstack": "^3.17.1",
+    "contentstack": "^3.19.0",
     "dotenv": "^16.3.1",
     "gatsby": "^5.12.5",
     "gatsby-plugin-env-variables": "^2.3.0",

src/components/Footer.tsx

@@ -5,11 +5,7 @@ import { connect } from "react-redux";
 import { actionFooter } from "../store/actions/state.action";
 import { getCSData } from "../live-preview-sdk/index";
 import { addEditableTags, isLiveEditTagsEnabled } from "../helper/index";
-import {
-  DispatchData,
-  Social,
-  Menu,
-} from "../typescript/layout";
+import { DispatchData, Social, Menu } from "../typescript/layout";
 import { FooterModel } from "../common/types";
 import ContentstackLivePreview from "@contentstack/live-preview-utils";
 import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";
@@ -18,7 +14,7 @@ const queryLayout = () => {
   const data = useStaticQuery(graphql`
     query {
       contentstackFooter {
-        __typename
+        cslp__meta
         title
         uid
         logo {
@@ -50,24 +46,24 @@ const queryLayout = () => {
 
 const Footer = ({ dispatch }: DispatchData) => {
   const { contentstackFooter } = queryLayout();
-  ContentstackGatsby.addContentTypeUidFromTypename(contentstackFooter)
-  isLiveEditTagsEnabled && addEditableTags(contentstackFooter, "footer")
+  ContentstackGatsby.addContentTypeUidFromTypename(contentstackFooter);
+  isLiveEditTagsEnabled && addEditableTags(contentstackFooter, "footer");
   const [getFooter, setFooter] = useState(contentstackFooter);
 
   async function getFooterData() {
     const footerRes: FooterModel = await getCSData.get(contentstackFooter);
-    isLiveEditTagsEnabled && addEditableTags(footerRes, "footer")
+    isLiveEditTagsEnabled && addEditableTags(footerRes, "footer");
     setFooter(footerRes);
   }
 
   useEffect(() => {
     const callbackId = ContentstackLivePreview.onLiveEdit(getFooterData);
     return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
-  }, [])
+  }, []);
 
   useEffect(() => {
     dispatch(actionFooter(getFooter));
-  }, [getFooter])
+  }, [getFooter]);
 
   return (
     <footer>

src/components/Header.tsx

@@ -16,7 +16,7 @@ const queryHeader = () => {
   const query = graphql`
     query {
       contentstackHeader {
-        __typename
+        cslp__meta
         title
         uid
         logo {
@@ -44,24 +44,24 @@ const queryHeader = () => {
 
 const Header = ({ dispatch }: DispatchData) => {
   const { contentstackHeader } = queryHeader();
-  ContentstackGatsby.addContentTypeUidFromTypename(contentstackHeader)
-  isLiveEditTagsEnabled && addEditableTags(contentstackHeader, "header")
+  ContentstackGatsby.addContentTypeUidFromTypename(contentstackHeader);
+  isLiveEditTagsEnabled && addEditableTags(contentstackHeader, "header");
   const [getHeader, setHeader] = useState(contentstackHeader);
 
   async function getHeaderData() {
     const headerRes: HeaderModel = await getCSData.get(contentstackHeader);
-    isLiveEditTagsEnabled && addEditableTags(headerRes, "header")
+    isLiveEditTagsEnabled && addEditableTags(headerRes, "header");
     setHeader(headerRes);
   }
 
   useEffect(() => {
     const callbackId = ContentstackLivePreview.onLiveEdit(getHeaderData);
     return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
-  }, [])
+  }, []);
 
   useEffect(() => {
     dispatch(actionHeader(getHeader));
-  }, [getHeader])
+  }, [getHeader]);
 
   return (
     <header className="header">

src/live-preview-sdk/index.ts

@@ -13,9 +13,9 @@ if (isBrowser) {
     region: process.env.CONTENTSTACK_REGION ? process.env.CONTENTSTACK_REGION : "us",
     branch: process.env.CONTENTSTACK_BRANCH ? process.env.CONTENTSTACK_BRANCH : "main",
     live_preview: {
-      management_token: process.env.CONTENTSTACK_MANAGEMENT_TOKEN,
       enable: process.env.CONTENTSTACK_LIVE_PREVIEW === "true",
-      host: process.env.CONTENTSTACK_API_HOST,
+      preview_host: process.env.CONTENTSTACK_PREVIEW_HOST,
+      preview_token: process.env.CONTENTSTACK_PREVIEW_TOKEN,
     },
     jsonRteToHtml: true,
   });

src/templates/blog-page.tsx

@@ -9,28 +9,28 @@ import { addEditableTags, isLiveEditTagsEnabled } from "../helper/index";
 import { PageProps } from "../typescript/template";
 import BlogList from "../components/BlogList";
 import ContentstackLivePreview from "@contentstack/live-preview-utils";
-import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview"
+import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";
 
 const Blog = ({
   data: { allContentstackBlogPost, contentstackPage },
 }: PageProps) => {
-  ContentstackGatsby.addContentTypeUidFromTypename(contentstackPage)
-  isLiveEditTagsEnabled && addEditableTags(contentstackPage, "page")
+  ContentstackGatsby.addContentTypeUidFromTypename(contentstackPage);
+  isLiveEditTagsEnabled && addEditableTags(contentstackPage, "page");
   const [getEntry, setEntry] = useState({
     banner: contentstackPage,
     blogList: allContentstackBlogPost.nodes,
   });
 
   async function fetchData() {
     const updatedData = await getCSData.get(contentstackPage);
-    isLiveEditTagsEnabled && addEditableTags(updatedData, "page")
-    setEntry((prev) => ({ ...prev, banner: updatedData }))
+    isLiveEditTagsEnabled && addEditableTags(updatedData, "page");
+    setEntry(prev => ({ ...prev, banner: updatedData }));
   }
 
   useEffect(() => {
     const callbackId = ContentstackLivePreview.onLiveEdit(fetchData);
     return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
-  }, [])
+  }, []);
 
   const newBlogList = [] as any;
   const newArchivedList = [] as any;
@@ -69,7 +69,7 @@ const Blog = ({
 export const postQuery = graphql`
   query {
     contentstackPage(url: { eq: "/blog" }) {
-      __typename
+      cslp__meta
       title
       url
       uid
@@ -89,7 +89,7 @@ export const postQuery = graphql`
         from_blog {
           title_h2
           featured_blogs {
-            __typename
+
             title
             uid
             url
@@ -185,11 +185,11 @@ export const postQuery = graphql`
         locale
         author {
           title
-          __typename
+          cslp__meta
           uid
         }
         related_post {
-          __typename
+          cslp__meta
           uid
           title
           body

src/templates/blog-post.tsx

@@ -10,28 +10,28 @@ import RenderComponents from "../components/RenderComponents";
 import { addEditableTags, isLiveEditTagsEnabled } from "../helper";
 import { PageProps } from "../typescript/template";
 import ContentstackLivePreview from "@contentstack/live-preview-utils";
-import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview"
+import { ContentstackGatsby } from "gatsby-source-contentstack/live-preview";
 
 const blogPost = ({
   data: { contentstackBlogPost, contentstackPage },
 }: PageProps) => {
-  ContentstackGatsby.addContentTypeUidFromTypename(contentstackBlogPost)
-  isLiveEditTagsEnabled && addEditableTags(contentstackBlogPost, "blog_post")
+  ContentstackGatsby.addContentTypeUidFromTypename(contentstackBlogPost);
+  isLiveEditTagsEnabled && addEditableTags(contentstackBlogPost, "blog_post");
   const [getEntry, setEntry] = useState({
     banner: contentstackPage,
     post: contentstackBlogPost,
   });
 
   const fetchLivePreviewData = async () => {
     const updatedData = await getCSData.get(contentstackBlogPost);
-    isLiveEditTagsEnabled && addEditableTags(updatedData, "blog_post")
-    setEntry((prev) => ({...prev, post: updatedData}))
-  }
+    isLiveEditTagsEnabled && addEditableTags(updatedData, "blog_post");
+    setEntry(prev => ({ ...prev, post: updatedData }));
+  };
 
   useEffect(() => {
     const callbackId = ContentstackLivePreview.onLiveEdit(fetchLivePreviewData);
     return () => ContentstackLivePreview.unsubscribeOnEntryChange(callbackId);
-  }, [])
+  }, []);
 
   return (
     <Layout blogPost={getEntry.post} banner={getEntry.banner}>
@@ -78,7 +78,7 @@ const blogPost = ({
 export const postQuery = graphql`
   query ($title: String!) {
     contentstackBlogPost(title: { eq: $title }) {
-      __typename
+      cslp__meta
       url
       title
       body
@@ -93,7 +93,7 @@ export const postQuery = graphql`
         }
       }
       related_post {
-        __typename
+
         uid
         body
         url
@@ -110,7 +110,7 @@ export const postQuery = graphql`
     contentstackPage(url: { eq: "/blog" }) {
       title
       url
-      __typename
+      cslp__meta
       uid
       locale
       seo {
@@ -129,7 +129,7 @@ export const postQuery = graphql`
           title_h2
           featured_blogs {
             title
-            __typename
+
             uid
             url
             is_archived

src/templates/page.tsx

@@ -47,7 +47,7 @@ const Page = ({ data: { contentstackPage } }: PageProps) => {
 export const pageQuery = graphql`
   query ($url: String!) {
     contentstackPage(url: { eq: $url }) {
-      __typename
+      cslp__meta
       uid
       title
       url
@@ -69,7 +69,7 @@ export const pageQuery = graphql`
 
           featured_blogs {
             uid
-            __typename
+
             title
             url
             featured_image {