fix: fetch preview content

app/[lang]/(preview)/preview/page.tsx

@@ -1,10 +1,13 @@
 import { notFound } from "next/navigation";
-import fs from "node:fs/promises";
-import path from "node:path";
 
-import { request } from "@/lib/request";
+import { previewRequest } from "@/lib/previewRequest";
 import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql";
 
+import Aside from "@/components/Current/Aside";
+import Blocks from "@/components/Current/Blocks";
+import Header from "@/components/Current/Header";
+import Hero from "@/components/Current/Hero";
+
 import type { PageArgs, LangParams, UriParams } from "@/types/params";
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage";
 
@@ -18,42 +21,29 @@ export default async function CurrentContentPage({
       throw new Error("Bad URI");
     }
 
-    // const response = await request<GetCurrentBlockPageData>(GetCurrentBlockPage, { locale: params.lang, url: searchParams.uri })
-
-    // console.log(response.data.all_current_blocks_page.items[0].blocks)
-
-    const filePath = path.join(
-      process.cwd(),
-      "mockCms",
-      params.lang,
-      searchParams.uri,
-      "data.json"
+    const response = await previewRequest<GetCurrentBlockPageData>(
+      GetCurrentBlockPage,
+      { locale: params.lang, url: searchParams.uri }
     );
 
-    const data = await fs.readFile(filePath, { encoding: "utf-8" });
-
-    if (!data) {
-      throw new Error("No data");
+    if (!response.data?.all_current_blocks_page?.total) {
+      console.log("#### DATA ####");
+      console.log(response.data);
+      console.log("SearchParams URI: ", searchParams.uri);
+      throw new Error("Not found");
     }
 
-    const json = JSON.parse(data);
+    const page = response.data.all_current_blocks_page.items[0];
+    const images = page.hero?.imagesConnection;
 
     return (
       <>
-        {json.hero ? (
-          <div
-            dangerouslySetInnerHTML={{ __html: json.hero }}
-            className="hero-content-overlay hero-content-widget"
-          />
-        ) : null}
-        {json.content ? (
-          <main
-            className="main l-sections-wrapper"
-            role="main"
-            id="maincontent"
-            dangerouslySetInnerHTML={{ __html: json.content }}
-          />
-        ) : null}
+        <Header lang={params.lang} pathname={searchParams.uri} />
+        {images?.totalCount ? <Hero images={images.edges} /> : null}
+        <main className="main l-sections-wrapper" id="maincontent" role="main">
+          <Blocks blocks={page.blocks} />
+          <Aside blocks={page.aside} />
+        </main>
       </>
     );
   } catch (err) {

lib/previewRequest.ts

@@ -7,26 +7,35 @@ import type { Data } from "@/types/request";
 import type { DocumentNode } from "graphql";
 import ContentstackLivePreview from "@contentstack/live-preview-utils";
 
-export async function request<T>(
+export async function previewRequest<T>(
   query: string | DocumentNode,
   variables?: {}
 ): Promise<Data<T>> {
   try {
     const hash = ContentstackLivePreview.hash;
 
-    const response = await graphqlRequest<T>({
-      document: query,
-      requestHeaders: {
-        access_token: env.CMS_ACCESS_TOKEN,
-        "Content-Type": "application/json",
-        preview_token: env.CMS_PREVIEW_TOKEN,
-        live_preview: hash,
-      },
-      url: env.CMS_PREVIEW_URL,
-      variables,
+    if (!env.CMS_PREVIEW_URL || !env.CMS_PREVIEW_TOKEN) {
+      throw new Error("No preview URL");
+    }
+    const headers = new Headers();
+
+    headers.append("access_token", env.CMS_ACCESS_TOKEN);
+    headers.append("Content-Type", "application/json");
+    headers.append("preview_token", env.CMS_PREVIEW_TOKEN);
+    headers.append("live_preview", hash);
+
+    const response = await fetch(env.CMS_PREVIEW_URL.toString(), {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        query,
+        variables,
+      }),
     });
 
-    return { data: response };
+    const { data } = await response.json();
+
+    return data as Data<T>;
   } catch (error) {
     console.error(error);
     throw new Error("Something went wrong");

middleware.ts

@@ -38,18 +38,11 @@ export async function middleware(request: NextRequest) {
 
   if (request.nextUrl.pathname.includes("preview")) {
     console.log("IN PREVIEW! Search params: ", request.nextUrl.searchParams);
-    if (request.nextUrl.searchParams.get("hash")) {
-      ContentstackLivePreview.setConfigFromParams(request.nextUrl.searchParams);
 
-      return NextResponse.rewrite(
-        new URL(
-          `/${locale}/current-content-page?${searchParams.toString()}`,
-          request.url
-        )
-      );
-    } else {
-      return Response.json("Not found!!!", { status: 404 });
-    }
+    ContentstackLivePreview.setConfigFromParams(request.nextUrl.searchParams);
+    return NextResponse.rewrite(
+      new URL(`/${locale}/preview?${searchParams.toString()}`, request.url)
+    );
   }
 
   switch (contentType) {