Merged in feat/use-hash-for-graphql-cache (pull request #2251)

Feature: Use hash of query+variables for graphql cache instead of gitsha

* feature: use a hash of query+variables as part of the cache key instead of gitsha

* .

* Merge branch 'master' of bitbucket.org:scandic-swap/web into feat/use-hash-for-graphql-cache

* use correct json stringify

* merge

* remove edgeRequest in favor of request

* add more indicative logging


Approved-by: Linus Flood

apps/scandic-web/lib/graphql/batchEdgeRequest.ts

@@ -1,41 +0,0 @@
-import deepmerge from "deepmerge"
-
-import { arrayMerge } from "@/utils/merge"
-
-import { edgeRequest } from "./edgeRequest"
-
-import type { BatchRequestDocument } from "graphql-request"
-
-import type { Data } from "@/types/request"
-
-export async function batchEdgeRequest<T>(
-  queries: BatchRequestDocument[]
-): Promise<Data<T>> {
-  try {
-    const response = await Promise.allSettled(
-      queries.map((query) => edgeRequest<T>(query.document, query.variables))
-    )
-
-    let data = {} as T
-    const reasons: PromiseRejectedResult["reason"][] = []
-    response.forEach((res) => {
-      if (res.status === "fulfilled") {
-        data = deepmerge(data, res.value.data, { arrayMerge })
-      } else {
-        reasons.push(res.reason)
-      }
-    })
-
-    if (reasons.length) {
-      reasons.forEach((reason) => {
-        console.error(`Batch request failed`, reason)
-      })
-    }
-
-    return { data }
-  } catch (error) {
-    console.error("Error in batched graphql request")
-    console.error(error)
-    throw new Error("Something went wrong")
-  }
-}

apps/scandic-web/lib/graphql/edgeRequest.ts

@@ -1,22 +0,0 @@
-import { GraphQLClient } from "graphql-request"
-
-import { env } from "@/env/server"
-
-import { request as _request } from "./_request"
-
-import type { DocumentNode } from "graphql"
-
-import type { Data } from "@/types/request"
-
-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)
-}

apps/scandic-web/lib/graphql/getOperationName.ts

@@ -0,0 +1,22 @@
+import type { DocumentNode } from "graphql"
+
+export function getOperationName(query: string | DocumentNode): string {
+  let operationName = ""
+
+  if (typeof query === "string") {
+    const operationRegex = /(query|mutation|subscription)\s+(\w+)/
+    const match = query.match(operationRegex)
+    if (match && match[2]) {
+      operationName = match[2]
+    }
+  } else {
+    const opDefinition = query.definitions.find(
+      (def) => def.kind === "OperationDefinition" && def.name
+    )
+    if (opDefinition && "name" in opDefinition && opDefinition.name) {
+      operationName = opDefinition.name.value
+    }
+  }
+
+  return operationName ?? "AnonymousOperation"
+}

apps/scandic-web/lib/graphql/request.ts

@@ -1,5 +1,6 @@
 import fetchRetry from "fetch-retry"
 import { GraphQLClient } from "graphql-request"
+import stringify from "json-stable-stringify-without-jsonify"
 import { cache as reactCache } from "react"
 
 import { env } from "@/env/server"
@@ -8,6 +9,7 @@ import { getPreviewHash, isPreviewByUid } from "@/lib/previewContext"
 import { type CacheTime, getCacheClient } from "@/services/dataCache"
 
 import { request as _request } from "./_request"
+import { getOperationName } from "./getOperationName"
 
 import type { DocumentNode } from "graphql"
 
@@ -37,12 +39,23 @@ export async function request<T>(
     return doCall()
   }
 
+  const queryString = typeof query === "string" ? query : stringify(query)
+  const variablesString = stringify(variables)
+
+  const fullQuery = `${queryString}${variablesString}`
+  const queryHash = await sha256(fullQuery)
+  const operationName = getOperationName(query)
+
   const cacheKey: string = Array.isArray(cacheOptions.key)
     ? cacheOptions.key.join("_")
     : cacheOptions.key
 
+  const extendedCacheKey = `${operationName}:${queryHash}:${cacheKey}`
+
   const _dataCache = await getCacheClient()
-  return _dataCache.cacheOrGet(cacheKey, doCall, cacheOptions.ttl)
+  return _dataCache.cacheOrGet(extendedCacheKey, doCall, cacheOptions.ttl, {
+    includeGitHashInKey: false,
+  })
 }
 
 function internalRequest<T>(
@@ -81,3 +94,13 @@ function internalRequest<T>(
 
   return _request(client, query, variables, mergedParams)
 }
+
+async function sha256(input: string) {
+  const encoder = new TextEncoder()
+  const data = encoder.encode(input)
+  const hashBuffer = await crypto.subtle.digest("SHA-256", data)
+  const hashArray = Array.from(new Uint8Array(hashBuffer))
+  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("")
+
+  return hashHex
+}