Merged in feat/skeletons-and-cache (pull request #1273)

feat: skeleton key bullet proof. 10 min cache on city search response

* feat: skeleton key bullet proof. 10 min cache on city search response

* Refactor server.ts


Approved-by: Michael Zetterberg

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx

@@ -16,16 +16,11 @@ export default async function SelectHotelMapPage({
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
 
-  const roomKey = Object.keys(searchParams)
-    .filter((key) => key.startsWith("room["))
-    .map((key) => searchParams[key])
-    .join("-")
-
   return (
     <div className={styles.main}>
       <MapContainer>
         <Suspense
-          key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
+          key={JSON.stringify(searchParams)}
           fallback={<SelectHotelMapContainerSkeleton />}
         >
           <SelectHotelMapContainer searchParams={searchParams} />

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -13,14 +13,9 @@ export default async function SelectHotelPage({
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
 
-  const roomKey = Object.keys(searchParams)
-    .filter((key) => key.startsWith("room["))
-    .map((key) => searchParams[key])
-    .join("-")
-
   return (
     <Suspense
-      key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
+      key={JSON.stringify(searchParams)}
       fallback={<SelectHotelSkeleton />}
     >
       <SelectHotel params={params} searchParams={searchParams} />

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -79,11 +79,6 @@ export default async function SelectRatePage({
 
   const hotelId = +hotel.id
 
-  const roomKey = Object.keys(searchParams)
-    .filter((key) => key.startsWith("room["))
-    .map((key) => searchParams[key])
-    .join("-")
-
   return (
     <>
       <HotelInfoCard
@@ -96,7 +91,7 @@ export default async function SelectRatePage({
       />
 
       <Suspense
-        key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}-${hotelId}`}
+        key={JSON.stringify(searchParams)}
         fallback={<RoomsContainerSkeleton />}
       >
         <RoomsContainer

env/server.ts

@@ -171,16 +171,20 @@ export const env = createEnv({
 
     CACHE_TIME_HOTELDATA: z
       .number()
-      .transform(() =>
+      .default(30 * 60)
-        process.env.CMS_ENVIRONMENT === "test" ? 5 * 60 : 30 * 60
+      .transform((val) =>
-      )
+        process.env.CMS_ENVIRONMENT === "test" ? 5 * 60 : val
-      .default(30 * 60),
+      ),
     CACHE_TIME_HOTELS: z
       .number()
-      .transform(() =>
+      .default(TWENTYFOUR_HOURS)
-        process.env.CMS_ENVIRONMENT === "test" ? 5 * 60 : TWENTYFOUR_HOURS
+      .transform((val) =>
-      )
+        process.env.CMS_ENVIRONMENT === "test" ? 5 * 60 : val
-      .default(TWENTYFOUR_HOURS),
+      ),
+    CACHE_TIME_CITY_SEARCH: z
+      .number()
+      .default(10 * 60)
+      .transform((val) => (process.env.CMS_ENVIRONMENT === "test" ? 60 : val)),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
@@ -268,6 +272,7 @@ export const env = createEnv({
 
     CACHE_TIME_HOTELDATA: process.env.CACHE_TIME_HOTELDATA,
     CACHE_TIME_HOTELS: process.env.CACHE_TIME_HOTELS,
+    CACHE_TIME_CITY_SEARCH: process.env.CACHE_TIME_CITY_SEARCH,
   },
 })
 

server/routers/hotels/query.ts

@@ -238,9 +238,13 @@ export const hotelQueryRouter = router({
         const apiResponse = await api.get(
           api.endpoints.v1.Availability.city(cityId),
           {
+            cache: undefined,
             headers: {
               Authorization: `Bearer ${ctx.serviceToken}`,
             },
+            next: {
+              revalidate: env.CACHE_TIME_CITY_SEARCH,
+            },
           },
           params
         )
@@ -354,9 +358,13 @@ export const hotelQueryRouter = router({
         const apiResponse = await api.get(
           api.endpoints.v1.Availability.hotels(),
           {
+            cache: undefined,
             headers: {
               Authorization: `Bearer ${ctx.serviceToken}`,
             },
+            next: {
+              revalidate: env.CACHE_TIME_CITY_SEARCH,
+            },
           },
           params
         )