fix(SW-663): Fixed caching issue by using new GraphQLClient for each request

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

@@ -5,7 +5,6 @@ import HotelPage from "@/components/ContentType/HotelPage"
 import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
 import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
 import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
-import LoadingSpinner from "@/components/LoadingSpinner"
 import { setLang } from "@/i18n/serverContext"
 
 import type {
@@ -25,7 +24,7 @@ export default async function PreviewPage({
     ContentstackLivePreview.setConfigFromParams(searchParams)
 
     if (!searchParams.live_preview) {
-      return <LoadingSpinner />
+      return notFound()
     }
 
     switch (params.contentType) {

lib/graphql/_request.ts

@@ -17,26 +17,19 @@ export async function request<T>(
   params?: RequestInit
 ): Promise<Data<T>> {
   try {
+    const previewHash = ContentstackLivePreview.hash
     client.setHeaders({
       access_token: env.CMS_ACCESS_TOKEN,
       "Content-Type": "application/json",
+      ...params?.headers,
     })
 
-    const previewHash = ContentstackLivePreview.hash
     if (previewHash) {
-      client.setEndpoint(env.CMS_PREVIEW_URL)
       client.setHeader("preview_token", env.CMS_PREVIEW_TOKEN)
       client.setHeader("live_preview", previewHash)
     } else {
-      if (params?.cache) {
-        client.requestConfig.cache = params.cache
-      }
-      if (params?.headers) {
-        client.requestConfig.headers = params.headers
-      }
-      if (params?.next) {
-        client.requestConfig.next = params.next
-      }
+      client.requestConfig.cache = params?.cache
+      client.requestConfig.next = params?.next
 
       if (env.PRINT_QUERY) {
         const print = (await import("graphql/language/printer")).print

lib/graphql/edgeRequest.ts

@@ -7,14 +7,15 @@ import { request as _request } from "./_request"
 
 import { Data } from "@/types/request"
 
-const client = new GraphQLClient(env.CMS_URL, {
-  fetch: fetch,
-})
-
 export async function edgeRequest<T>(
   query: string | DocumentNode,
   variables?: {},
   params?: RequestInit
 ): Promise<Data<T>> {
+  // Creating a new client for each request to avoid conflicting parameters
+  const client = new GraphQLClient(env.CMS_URL, {
+    fetch: fetch,
+  })
+
   return _request(client, query, variables, params)
 }

lib/graphql/request.ts

@@ -1,3 +1,4 @@
+import { ContentstackLivePreview } from "@contentstack/live-preview-utils"
 import fetchRetry from "fetch-retry"
 import { DocumentNode } from "graphql"
 import { GraphQLClient } from "graphql-request"
@@ -9,25 +10,26 @@ import { request as _request } from "./_request"
 
 import { Data } from "@/types/request"
 
-const client = new GraphQLClient(env.CMS_URL, {
-  fetch: cache(async function (
-    url: URL | RequestInfo,
-    params: RequestInit | undefined
-  ) {
-    const wrappedFetch = fetchRetry(fetch, {
-      retries: 3,
-      retryDelay: function (attempt, error, response) {
-        return Math.pow(2, attempt) * 150 // 150, 300, 600
-      },
-    })
-    return wrappedFetch(url, params)
-  }),
-})
-
 export async function request<T>(
   query: string | DocumentNode,
   variables?: {},
   params?: RequestInit
 ): Promise<Data<T>> {
+  const previewHash = ContentstackLivePreview.hash
+
+  const cmsUrl = previewHash ? env.CMS_PREVIEW_URL : env.CMS_URL
+
+  const client = new GraphQLClient(cmsUrl, {
+    fetch: cache(async function (url: URL | RequestInfo, params?: RequestInit) {
+      const wrappedFetch = fetchRetry(fetch, {
+        retries: 3,
+        retryDelay: function (attempt, error, response) {
+          return Math.pow(2, attempt) * 150 // 150, 300, 600
+        },
+      })
+      return wrappedFetch(url, params)
+    }),
+  })
+
   return _request(client, query, variables, params)
 }