Fix ETL staging server MDim caching issues (#4296)

use isPreviewing flag to pass ?nocache for config requests to avoid caching on staging servers shorten CF internal cache times for configs
owid · Dec 13, 2024 · 28ba2e4 · 28ba2e4
1 parent bea23fc
commit 28ba2e4
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 12 deletions.
diff --git a/adminSiteServer/adminRouter.tsx b/adminSiteServer/adminRouter.tsx
@@ -363,7 +363,8 @@ getPlainRouteWithROTransaction(
             const renderedPage = await renderMultiDimDataPageFromConfig(
                 trx,
                 slug,
-                mdd.config
+                mdd.config,
+                true
             )
             res.send(renderedPage)
             return

diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
@@ -119,7 +119,8 @@ const getFaqEntries = async (
 export const renderMultiDimDataPageFromConfig = async (
     knex: db.KnexReadonlyTransaction,
     slug: string,
-    config: MultiDimDataPageConfigEnriched
+    config: MultiDimDataPageConfigEnriched,
+    isPreviewing: boolean = false
 ) => {
     // TAGS
     const tagToSlugMap = await getTagToSlugMap(knex)
@@ -142,6 +143,7 @@ export const renderMultiDimDataPageFromConfig = async (
         tagToSlugMap: minimalTagToSlugMap,
         faqEntries,
         primaryTopic,
+        isPreviewing,
     }
 
     return renderMultiDimDataPageFromProps(props)

diff --git a/functions/grapher/[slug].ts b/functions/grapher/[slug].ts
@@ -186,7 +186,7 @@ async function handleConfigRequest(
     }
 
     const cacheControl = shouldCache
-        ? "s-maxage=3600, max-age=0, must-revalidate"
+        ? "s-maxage=300, max-age=0, must-revalidate"
         : "no-cache"
 
     //grapherPageResp.headers.set("Cache-Control", cacheControl)

diff --git a/functions/grapher/by-uuid/[uuid].ts b/functions/grapher/by-uuid/[uuid].ts
@@ -87,7 +87,7 @@ async function handleConfigRequest(
     console.log("Grapher page response", grapherPageResp.grapherConfig.title)
 
     const cacheControl = shouldCache
-        ? "s-maxage=3600, max-age=0, must-revalidate"
+        ? "s-maxage=300, max-age=0, must-revalidate"
         : "no-cache"
 
     return Response.json(grapherPageResp.grapherConfig, {

diff --git a/functions/multi-dim/[slug].json.ts b/functions/multi-dim/[slug].json.ts
@@ -28,7 +28,7 @@ export const onRequestGet: PagesFunction<Env> = async ({
     }
 
     const cacheControl = shouldCache
-        ? "s-maxage=3600, max-age=0, must-revalidate"
+        ? "s-maxage=300, max-age=0, must-revalidate"
         : "no-cache"
 
     return new Response(grapherPageResp.body, {

diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
@@ -18,6 +18,7 @@ export function MultiDimDataPage({
     faqEntries,
     primaryTopic,
     initialQueryStr,
+    isPreviewing,
 }: MultiDimDataPageProps) {
     const canonicalUrl = `${baseGrapherUrl}/${slug}`
     const contentProps: MultiDimDataPageContentProps = {
@@ -81,6 +82,7 @@ export function MultiDimDataPage({
                 <SiteFooter
                     baseUrl={baseUrl}
                     context={SiteFooterContext.multiDimDataPage}
+                    isPreviewing={isPreviewing}
                 />
             </body>
         </Html>

diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
@@ -108,10 +108,14 @@ const cachedGetVariableMetadata = memoize(
 )
 
 const cachedGetGrapherConfigByUuid = memoize(
-    (grapherConfigUuid: string): Promise<GrapherInterface> =>
-        fetchWithRetry(
-            `/grapher/by-uuid/${grapherConfigUuid}.config.json`
+    (
+        grapherConfigUuid: string,
+        isPreviewing: boolean
+    ): Promise<GrapherInterface> => {
+        return fetchWithRetry(
+            `/grapher/by-uuid/${grapherConfigUuid}.config.json${isPreviewing ? "?nocache" : ""}`
         ).then((resp) => resp.json())
+    }
 )
 
 const useTitleFragments = (config: MultiDimDataPageConfig) => {
@@ -135,7 +139,8 @@ const useView = (
 
 const useVarDatapageData = (
     config: MultiDimDataPageConfig,
-    currentView: ViewEnriched | undefined
+    currentView: ViewEnriched | undefined,
+    isPreviewing: boolean
 ) => {
     const [varDatapageData, setVarDatapageData] =
         useState<DataPageDataV2 | null>(null)
@@ -163,7 +168,7 @@ const useVarDatapageData = (
         )
         const grapherConfigUuid = currentView?.fullConfigId
         const grapherConfigPromise = grapherConfigUuid
-            ? cachedGetGrapherConfigByUuid(grapherConfigUuid)
+            ? cachedGetGrapherConfigByUuid(grapherConfigUuid, isPreviewing)
             : null
 
         Promise.allSettled([datapageDataPromise, grapherConfigPromise])
@@ -189,6 +194,7 @@ const useVarDatapageData = (
         currentView?.indicators,
         currentView?.config,
         currentView?.metadata,
+        isPreviewing,
     ])
 
     return {
@@ -216,7 +222,7 @@ export const MultiDimDataPageContent = ({
     canonicalUrl,
     // _datapageData,
     configObj,
-    // isPreviewing = false,
+    isPreviewing,
     faqEntries,
     primaryTopic,
     tagToSlugMap,
@@ -242,7 +248,7 @@ export const MultiDimDataPageContent = ({
 
     const currentView = useView(currentSettings, config)
     const { varDatapageData, varGrapherConfig, grapherConfigIsReady } =
-        useVarDatapageData(config, currentView)
+        useVarDatapageData(config, currentView, isPreviewing ?? false)
 
     // This is the ACTUAL grapher instance being used, because GrapherFigureView/GrapherWithFallback are doing weird things and are not actually using the grapher instance we pass into it
     // and therefore we can not access the grapher state (e.g. tab, selection) from the grapher instance we pass into it