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
-        client.requestConfig.cache = params.cache
+      client.requestConfig.next = params?.next
-      }
-      if (params?.headers) {
-        client.requestConfig.headers = params.headers
-      }
-      if (params?.next) {
-        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,11 +10,17 @@ import { request as _request } from "./_request"
 
 import { Data } from "@/types/request"
 
-const client = new GraphQLClient(env.CMS_URL, {
+export async function request<T>(
-  fetch: cache(async function (
+  query: string | DocumentNode,
-    url: URL | RequestInfo,
+  variables?: {},
-    params: RequestInit | undefined
+  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) {
@@ -24,10 +31,5 @@ const client = new GraphQLClient(env.CMS_URL, {
     }),
   })
 
-export async function request<T>(
-  query: string | DocumentNode,
-  variables?: {},
-  params?: RequestInit
-): Promise<Data<T>> {
   return _request(client, query, variables, params)
 }