Do not try to connect to CMS in View Mode

We need to check if we are in Edit Mode and only then
try to connect to CMS

Author: barteksekula

src/apolloClient.tsx

@@ -1,41 +1,39 @@
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
 import { setContext } from '@apollo/client/link/context';
+import { getPreviewToken } from "@/helpers/onContentSaved";
 
 let client: ApolloClient<any> | undefined = undefined;
 const graphUrl = process.env.GRAPH_URL;
 const cmsUrl = process.env.CMS_URL;
+const preview_token = getPreviewToken();
 
-if (typeof window !== "undefined" && window.location !== undefined) {
-    const queryString = window?.location?.search;
-    const urlParams = new URLSearchParams(queryString);
-    const preview_token = urlParams.get('preview_token') ?? undefined;
-
-    if (preview_token) {
-        const httpLink = createHttpLink({
-            uri: `https://${graphUrl}/content/v2`,
-        });
-
-        const authLink = setContext((_, { headers }) => {
-            return {
-                headers: {
-                    ...headers,
-                    authorization: `Bearer ${preview_token}`
-                }
-            };
-        });
-
-        client = new ApolloClient({
-            link: authLink.concat(httpLink),
-            cache: new InMemoryCache()
-        });
-
-        const communicationScript = document.createElement('script');
-        communicationScript.src = `https://${cmsUrl}/Util/javascript/communicationInjector.js`;
-        communicationScript.setAttribute('data-nscript', 'afterInteractive')
-        document.body.appendChild(communicationScript);
-    }
+// In Preview Mode
+if (preview_token) {
+    const httpLink = createHttpLink({
+        uri: `https://${graphUrl}/content/v2`,
+    });
+
+    const authLink = setContext((_, { headers }) => {
+        return {
+            headers: {
+                ...headers,
+                authorization: `Bearer ${preview_token}`
+            }
+        };
+    });
+
+    client = new ApolloClient({
+        link: authLink.concat(httpLink),
+        cache: new InMemoryCache()
+    });
+
+    const communicationScript = document.createElement('script');
+    communicationScript.src = `https://${cmsUrl}/Util/javascript/communicationInjector.js`;
+    communicationScript.setAttribute('data-nscript', 'afterInteractive')
+    document.body.appendChild(communicationScript);
 }
 
+// In Public Mode
 if (client === undefined) {
     const singleGraphKey = process.env.GRAPH_SINGLE_KEY;
     const httpLink = createHttpLink({

src/helpers/onContentSaved.ts

@@ -12,6 +12,20 @@ interface ContentSavedEventArgs {
     sectionId?: string;
 }
 
+export function getPreviewToken() {
+    if (typeof window !== "undefined" && window.location !== undefined) {
+        const queryString = window?.location?.search;
+        const urlParams = new URLSearchParams(queryString);
+        return urlParams.get('preview_token');
+    } else {
+        return undefined;
+    }
+}
+
+function isInEditMode() {
+    return !!getPreviewToken();
+}
+
 function ensureEpiLoaded() {
     if (typeof window !== "undefined") {
         const epi = (window as any).epi;
@@ -24,6 +38,10 @@ function ensureEpiLoaded() {
 }
 
 export function onContentSaved(callback: ((message: ContentSavedEventArgs) => void )) {
+    if (!isInEditMode()) {
+        return;
+    }
+    
     const epi = ensureEpiLoaded();
     if (epi) {
         console.info("successfully connected to CMS.");