change file based to in memory cache

Author: pettinarip

src/lib/utils/data/cacheAsyncFn.ts

@@ -1,71 +1,53 @@
-import fs from "fs"
-import path from "path"
-
-const CACHE_FILE_DIR = path.resolve(".next/cache")
-
 /**
- * Caches the result of an asynchronous function to avoid multiple calls during build time.
- * This helps prevent hitting external API rate limits by storing the result in a file.
+ * Caches the result of an asynchronous function in memory to avoid multiple calls.
+ * This helps prevent hitting external API rate limits by storing the result in memory.
  *
  * @param key A unique identifier for the cached function result
  * @param fn The asynchronous function to be cached
  * @param options Optional parameters to configure cache behavior
- * @returns A new function that returns the cached result or executes the original function if the cache is invalid
+ * @param options.cacheTimeout The duration in milliseconds for which the cache remains valid
+ * @returns A new function that returns the cached result or executes the original function if the cache is expired
  *
  * @example
- * const cachedFetch = cacheAsyncFn('uniqueKey', fetchSomething);
+ * const cachedFetch = cacheAsyncFn('uniqueKey', fetchSomething, { cacheTimeout: 60000 });
  *
  * await cachedFetch(); // Fetches and caches the data
- * await cachedFetch(); // Returns the cached data without re-fetching
- *
- * @note The cache is stored in the '.next/cache' directory and expires after the `cacheTimeout`
+ * await cachedFetch(); // Returns the cached data
  */
 
+// In-memory cache object
+const memoryCache: Record<string, { value: unknown; timestamp: number }> = {}
+
 export function cacheAsyncFn<T>(
   key: string,
   fn: () => Promise<T>,
   options?: { cacheTimeout?: number }
 ) {
-  const cacheFilePath = path.resolve(CACHE_FILE_DIR, `${key}.json`)
-
   return async (): Promise<T> => {
-    let value: T | undefined
+    const now = Date.now()
+    const cachedItem = memoryCache[key]
 
-    // Check if cache file exists
-    if (fs.existsSync(cacheFilePath)) {
-      const fileStats = fs.statSync(cacheFilePath)
-      const now = Date.now()
-      const cacheAge = now - new Date(fileStats.mtime).getTime()
+    // Check if cache exists and is not expired
+    if (cachedItem) {
+      const cacheAge = now - cachedItem.timestamp
       const isCacheExpired =
         options?.cacheTimeout && cacheAge > options.cacheTimeout
 
-      // Invalidate cache if it's too old
-      if (isCacheExpired) {
-        // Remove stale cache
-        fs.unlinkSync(cacheFilePath)
-        console.log("Stale cache removed", key)
-      } else {
-        // Cache hit
-        const cachedData = fs.readFileSync(cacheFilePath, "utf-8")
-        value = JSON.parse(cachedData)
+      if (!isCacheExpired) {
         console.log("Cache hit", key)
+        return cachedItem.value as T
       }
+      console.log("Cache expired", key)
     }
 
-    // If no cached data, fetch fresh data
-    if (!value) {
-      console.log("Running function for the first time", key)
-      value = await fn()
-      console.log("Function ran and cached", key)
-
-      // Ensure cache folder exists
-      fs.mkdirSync(CACHE_FILE_DIR, { recursive: true })
+    // Fetch fresh data
+    console.log("Running function", key)
+    const value = await fn()
 
-      // Write data to cache file
-      fs.writeFileSync(cacheFilePath, JSON.stringify(value), "utf-8")
-      console.log("Function cached", key)
-    }
+    // Store in memory cache
+    memoryCache[key] = { value: value, timestamp: now }
+    console.log("Function result cached", key)
 
-    return value!
+    return value as T
   }
 }

src/lib/utils/data/dataLoader.ts

@@ -6,32 +6,36 @@ const USE_MOCK_DATA = process.env.USE_MOCK_DATA === "true"
 type DataLoaderFunction<T> = () => Promise<T>
 
 /**
- * Loads data from multiple asynchronous functions and caches the results.
+ * Creates a function that loads data from multiple asynchronous functions and caches the results.
  *
  * @param loaders An array of tuples, each containing a unique identifier and the asynchronous function to be cached
- * @returns A promise that resolves to an array of the results from the cached functions
+ * @param cacheTimeout Optional cache timeout in milliseconds
+ * @returns A function that, when called, executes the loaders and returns a promise with the results
  *
  * @example
- * const [ethPrice, totalEthStaked, totalValueLocked] = await dataLoader([
+ * const loadData = dataLoader([
  *   ['ethPrice', fetchEthPrice],
  *   ['totalEthStaked', fetchTotalEthStaked],
  *   ['totalValueLocked', fetchTotalValueLocked],
  * ]);
+ *
+ * const [ethPrice, totalEthStaked, totalValueLocked] = await loadData();
  */
 
-export async function dataLoader<T extends unknown[]>(
+export function dataLoader<T extends unknown[]>(
   loaders: {
     [K in keyof T]: [string, DataLoaderFunction<T[K]>]
   },
   cacheTimeout?: number
-): Promise<T> {
+): () => Promise<T> {
   const cachedLoaders = loaders.map(([key, loader]) => {
     const cachedLoader = cacheAsyncFn(key, loader, {
       cacheTimeout,
     })
     return async () => {
       try {
         if (USE_MOCK_DATA) {
+          console.log("Using mock data for", key)
           return await loadMockData(key)
         }
 
@@ -43,6 +47,8 @@ export async function dataLoader<T extends unknown[]>(
     }
   })
 
-  const results = await Promise.all(cachedLoaders.map((loader) => loader()))
-  return results as T
+  return async () => {
+    const results = await Promise.all(cachedLoaders.map((loader) => loader()))
+    return results as T
+  }
 }

src/pages/[...slug].tsx

@@ -116,6 +116,8 @@ type Props = Omit<Parameters<LayoutMappingType[Layout]>[0], "children"> &
 
 const commitHistoryCache: CommitHistory = {}
 
+const loadData = dataLoader([["gfissues", fetchGFIs]])
+
 export const getStaticProps = (async (context) => {
   const params = context.params!
   const { locale } = context
@@ -194,7 +196,7 @@ export const getStaticProps = (async (context) => {
     lastDeployDate
   )
 
-  const [gfissues] = await dataLoader([["gfissues", fetchGFIs]])
+  const [gfissues] = await loadData()
 
   return {
     props: {

src/pages/developers/local-environment.tsx

@@ -53,6 +53,10 @@ const Column = ({ children }: ChildOnlyProp) => {
   )
 }
 
+const loadData = dataLoader([
+  ["frameworksListData", getLocalEnvironmentFrameworkData],
+])
+
 type Props = BasePageProps & {
   frameworksList: Framework[]
 }
@@ -64,9 +68,7 @@ export const getStaticProps = (async ({ locale }) => {
 
   const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[2])
 
-  const [frameworksListData] = await dataLoader([
-    ["frameworksListData", getLocalEnvironmentFrameworkData],
-  ])
+  const [frameworksListData] = await loadData()
 
   const lastDeployDate = getLastDeployDate()
   const lastDeployLocaleTimestamp = getLocaleTimestamp(

src/pages/index.tsx

@@ -121,6 +121,19 @@ type Props = BasePageProps & {
 // In seconds
 const REVALIDATE_TIME = BASE_TIME_UNIT * 24
 
+const loadData = dataLoader(
+  [
+    ["ethPrice", fetchEthPrice],
+    ["totalEthStaked", fetchTotalEthStaked],
+    ["totalValueLocked", fetchTotalValueLocked],
+    ["growThePieData", fetchGrowThePie],
+    ["communityEvents", fetchCommunityEvents],
+    ["attestantPosts", fetchAttestantPosts],
+    ["rssData", fetchXmlBlogFeeds],
+  ],
+  REVALIDATE_TIME * 1000
+)
+
 export const getStaticProps = (async ({ locale }) => {
   const [
     ethPrice,
@@ -130,18 +143,7 @@ export const getStaticProps = (async ({ locale }) => {
     communityEvents,
     attestantPosts,
     xmlBlogs,
-  ] = await dataLoader(
-    [
-      ["ethPrice", fetchEthPrice],
-      ["totalEthStaked", fetchTotalEthStaked],
-      ["totalValueLocked", fetchTotalValueLocked],
-      ["growThePieData", fetchGrowThePie],
-      ["communityEvents", fetchCommunityEvents],
-      ["attestantPosts", fetchAttestantPosts],
-      ["rssData", fetchXmlBlogFeeds],
-    ],
-    REVALIDATE_TIME * 1000
-  )
+  ] = await loadData()
 
   const metricResults: AllMetricData = {
     ethPrice,

src/pages/stablecoins.tsx

@@ -93,6 +93,14 @@ type Props = BasePageProps & {
 // In seconds
 const REVALIDATE_TIME = BASE_TIME_UNIT * 24 * 7
 
+const loadData = dataLoader<[EthereumDataResponse, StablecoinDataResponse]>(
+  [
+    ["ethereumEcosystemData", fetchEthereumEcosystemData],
+    ["ethereumStablecoinsData", fetchEthereumStablecoinsData],
+  ],
+  REVALIDATE_TIME * 1000
+)
+
 export const getStaticProps = (async ({ locale }) => {
   const lastDeployDate = getLastDeployDate()
   const lastDeployLocaleTimestamp = getLocaleTimestamp(
@@ -138,15 +146,7 @@ export const getStaticProps = (async ({ locale }) => {
   }
 
   try {
-    const [ethereumEcosystemData, stablecoinsData] = await dataLoader<
-      [EthereumDataResponse, StablecoinDataResponse]
-    >(
-      [
-        ["ethereumEcosystemData", fetchEthereumEcosystemData],
-        ["ethereumStablecoinsData", fetchEthereumStablecoinsData],
-      ],
-      REVALIDATE_TIME * 1000
-    )
+    const [ethereumEcosystemData, stablecoinsData] = await loadData()
 
     // Get the intersection of stablecoins and Ethereum tokens to only have a list of data for stablecoins in the Ethereum ecosystem
     const ethereumStablecoinData = stablecoinsData.filter(

src/pages/staking/index.tsx

@@ -156,6 +156,11 @@ type Props = BasePageProps & {
 // In seconds
 const REVALIDATE_TIME = BASE_TIME_UNIT * 24
 
+const loadData = dataLoader(
+  [["stakingStatsData", fetchBeaconchainData]],
+  REVALIDATE_TIME * 1000
+)
+
 export const getStaticProps = (async ({ locale }) => {
   const lastDeployDate = getLastDeployDate()
   const lastDeployLocaleTimestamp = getLocaleTimestamp(
@@ -167,10 +172,7 @@ export const getStaticProps = (async ({ locale }) => {
 
   const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[2])
 
-  const [data] = await dataLoader(
-    [["stakingStatsData", fetchBeaconchainData]],
-    REVALIDATE_TIME * 1000
-  )
+  const [data] = await loadData()
 
   return {
     props: {

src/pages/what-is-ethereum.tsx

@@ -176,8 +176,10 @@ type Props = BasePageProps & {
   data: MetricReturnData
 }
 
+const loadData = dataLoader([["growThePieData", fetchGrowThePie]])
+
 export const getStaticProps = (async ({ locale }) => {
-  const [data] = await dataLoader([["growThePieData", fetchGrowThePie]])
+  const [data] = await loadData()
 
   const lastDeployDate = getLastDeployDate()
   const lastDeployLocaleTimestamp = getLocaleTimestamp(