Implement data layer across pages

app/[locale]/[...slug]/page.tsx

@@ -7,26 +7,29 @@ import {
 } from "next-intl/server"
 
 import type { SlugPageParams } from "@/lib/types"
+import type { GHIssue } from "@/lib/types"
 
 import I18nProvider from "@/components/I18nProvider"
 import mdComponents from "@/components/MdComponents"
 
-import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { dateToString } from "@/lib/utils/date"
 import { getLayoutFromSlug } from "@/lib/utils/layout"
 import { checkPathValidity, getPostSlugs } from "@/lib/utils/md"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
-import { LOCALES_CODES } from "@/lib/constants"
+import { FETCH_GFIS_TASK_ID } from "@/data-layer/api/fetchGFIs"
+import { getCachedData } from "@/data-layer/storage/cachedGetter"
+
+import { BASE_TIME_UNIT, LOCALES_CODES } from "@/lib/constants"
 
 import SlugJsonLD from "./page-jsonld"
 
 import { componentsMapping, layoutMapping } from "@/layouts"
-import { fetchGFIs } from "@/lib/api/fetchGFIs"
 import { getPageData } from "@/lib/md/data"
 import { getMdMetadata } from "@/lib/md/metadata"
 
-const loadData = dataLoader([["gfissues", fetchGFIs]])
+// In seconds - GFIs don't change frequently, so use 24 hours
+const REVALIDATE_TIME = BASE_TIME_UNIT * 24
 
 export default async function Page({ params }: { params: SlugPageParams }) {
   const { locale, slug: slugArray } = params
@@ -40,7 +43,14 @@ export default async function Page({ params }: { params: SlugPageParams }) {
   // Enable static rendering
   setRequestLocale(locale)
 
-  const [gfissues] = await loadData()
+  // Fetch data from data layer with Next.js caching
+  const gfissuesResult = await getCachedData<GHIssue[]>(
+    FETCH_GFIS_TASK_ID,
+    REVALIDATE_TIME
+  )
+
+  // Handle missing data gracefully
+  const gfissues = gfissuesResult || []
 
   const slug = slugArray.join("/")
 

app/[locale]/apps/[application]/page.tsx

@@ -6,7 +6,13 @@ import {
   setRequestLocale,
 } from "next-intl/server"
 
-import type { ChainName, CommitHistory, Lang, PageParams } from "@/lib/types"
+import type {
+  AppData,
+  ChainName,
+  CommitHistory,
+  Lang,
+  PageParams,
+} from "@/lib/types"
 
 import ChainImages from "@/components/ChainImages"
 import { ChevronNext } from "@/components/Chevron"
@@ -32,7 +38,6 @@ import { Tag } from "@/components/ui/tag"
 
 import { APP_TAG_VARIANTS } from "@/lib/utils/apps"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
-import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { isValidDate } from "@/lib/utils/date"
 import { getMetadata } from "@/lib/utils/metadata"
 import {
@@ -42,20 +47,19 @@ import {
 import { slugify } from "@/lib/utils/url"
 import { formatStringList } from "@/lib/utils/wallets"
 
+import { FETCH_APPS_TASK_ID } from "@/data-layer/api/fetchApps"
+import { getCachedData } from "@/data-layer/storage/cachedGetter"
+
 import { BASE_TIME_UNIT } from "@/lib/constants"
 
 import AppCard from "../_components/AppCard"
 
 import ScreenshotSwiper from "./_components/ScreenshotSwiper"
 import AppsAppJsonLD from "./page-jsonld"
 
-import { fetchApps } from "@/lib/api/fetchApps"
-
 // 24 hours
 const REVALIDATE_TIME = BASE_TIME_UNIT * 24
 
-const loadData = dataLoader([["appsData", fetchApps]], REVALIDATE_TIME * 1000)
-
 const Page = async ({
   params,
 }: {
@@ -72,11 +76,17 @@ const Page = async ({
   const requiredNamespaces = getRequiredNamespacesForPage("/apps")
   const messages = pick(allMessages, requiredNamespaces)
 
-  // const [application] = application
-  const [appsData] = await loadData()
+  // Fetch data from data layer with Next.js caching
+  const appsDataResult = await getCachedData<Record<string, AppData[]>>(
+    FETCH_APPS_TASK_ID,
+    REVALIDATE_TIME
+  )
+
+  // Handle missing data gracefully
+  const appsData = appsDataResult || {}
   const app = Object.values(appsData)
     .flat()
-    .find((app) => slugify(app.name) === application)!
+    .find((app) => slugify(app.name) === application)
 
   if (!app) {
     notFound()
@@ -394,11 +404,17 @@ export async function generateMetadata({
 }) {
   const { locale, application } = params
 
-  const [appsData] = await loadData()
+  // Fetch data from data layer with Next.js caching
+  const appsDataResult = await getCachedData<Record<string, AppData[]>>(
+    FETCH_APPS_TASK_ID,
+    REVALIDATE_TIME
+  )
 
+  // Handle missing data gracefully
+  const appsData = appsDataResult || {}
   const app = Object.values(appsData)
     .flat()
-    .find((app) => slugify(app.name) === application)!
+    .find((app) => slugify(app.name) === application)
 
   if (!app) {
     notFound()

app/[locale]/apps/categories/[catetgoryName]/page.tsx

@@ -8,6 +8,7 @@ import {
 
 import {
   AppCategoryEnum,
+  type AppData,
   type CommitHistory,
   type Lang,
   type PageParams,
@@ -29,11 +30,12 @@ import TabNav from "@/components/ui/TabNav"
 
 import { getHighlightedApps } from "@/lib/utils/apps"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
-import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { getMetadata } from "@/lib/utils/metadata"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import { appsCategories } from "@/data/apps/categories"
+import { FETCH_APPS_TASK_ID } from "@/data-layer/api/fetchApps"
+import { getCachedData } from "@/data-layer/storage/cachedGetter"
 
 import { BASE_TIME_UNIT } from "@/lib/constants"
 
@@ -43,8 +45,6 @@ import SuggestAnApp from "../../_components/SuggestAnApp"
 
 import AppsCategoryJsonLD from "./page-jsonld"
 
-import { fetchApps } from "@/lib/api/fetchApps"
-
 const VALID_CATEGORIES = Object.values(AppCategoryEnum)
 
 const isValidCategory = (category: string): category is AppCategoryEnum =>
@@ -53,8 +53,6 @@ const isValidCategory = (category: string): category is AppCategoryEnum =>
 // 24 hours
 const REVALIDATE_TIME = BASE_TIME_UNIT * 24
 
-const loadData = dataLoader([["appsData", fetchApps]], REVALIDATE_TIME * 1000)
-
 const Page = async ({
   params,
 }: {
@@ -63,7 +61,14 @@ const Page = async ({
   const { locale, catetgoryName } = params
   setRequestLocale(locale)
 
-  const [appsData] = await loadData()
+  // Fetch data from data layer with Next.js caching
+  const appsDataResult = await getCachedData<Record<string, AppData[]>>(
+    FETCH_APPS_TASK_ID,
+    REVALIDATE_TIME
+  )
+
+  // Handle missing data gracefully
+  const appsData = appsDataResult || {}
 
   const t = await getTranslations({ locale, namespace: "page-apps" })
 

app/[locale]/apps/page.tsx

@@ -5,6 +5,7 @@ import {
   setRequestLocale,
 } from "next-intl/server"
 
+import type { AppData, CommunityPick } from "@/lib/types"
 import { CommitHistory, Lang, PageParams } from "@/lib/types"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
@@ -15,11 +16,13 @@ import SubpageCard from "@/components/SubpageCard"
 
 import { getDiscoverApps, getHighlightedApps } from "@/lib/utils/apps"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
-import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { getMetadata } from "@/lib/utils/metadata"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import { appsCategories } from "@/data/apps/categories"
+import { FETCH_APPS_TASK_ID } from "@/data-layer/api/fetchApps"
+import { FETCH_COMMUNITY_PICKS_TASK_ID } from "@/data-layer/api/fetchCommunityPicks"
+import { getCachedData } from "@/data-layer/storage/cachedGetter"
 
 import { BASE_TIME_UNIT } from "@/lib/constants"
 
@@ -30,26 +33,29 @@ import SuggestAnApp from "./_components/SuggestAnApp"
 import TopApps from "./_components/TopApps"
 import AppsJsonLD from "./page-jsonld"
 
-import { fetchApps } from "@/lib/api/fetchApps"
-import { fetchCommunityPicks } from "@/lib/api/fetchCommunityPicks"
-
 // 24 hours
 const REVALIDATE_TIME = BASE_TIME_UNIT * 24
 
-const loadData = dataLoader(
-  [
-    ["appsData", fetchApps],
-    ["communityPicks", fetchCommunityPicks],
-  ],
-  REVALIDATE_TIME * 1000
-)
-
 const Page = async ({ params }: { params: PageParams }) => {
   const { locale } = params
 
   setRequestLocale(locale)
 
-  const [appsData, communityPicks] = await loadData()
+  // Fetch data from data layer with Next.js caching
+  const [appsDataResult, communityPicksResult] = await Promise.all([
+    getCachedData<Record<string, AppData[]>>(
+      FETCH_APPS_TASK_ID,
+      REVALIDATE_TIME
+    ),
+    getCachedData<CommunityPick[]>(
+      FETCH_COMMUNITY_PICKS_TASK_ID,
+      REVALIDATE_TIME
+    ),
+  ])
+
+  // Handle missing data gracefully
+  const appsData = appsDataResult || {}
+  const communityPicks = communityPicksResult || []
 
   // Get 3 random highlighted apps
   const highlightedApps = getHighlightedApps(appsData, 3)

app/[locale]/developers/local-environment/page.tsx

@@ -6,29 +6,46 @@ import {
 } from "next-intl/server"
 
 import type { CommitHistory, Lang, PageParams } from "@/lib/types"
+import type { Framework } from "@/lib/interfaces"
 
 import I18nProvider from "@/components/I18nProvider"
 
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
-import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { getMetadata } from "@/lib/utils/metadata"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
+import { FETCH_GITHUB_REPO_DATA_TASK_ID } from "@/data-layer/api/fetchGithubRepoData"
+import { getCachedData } from "@/data-layer/storage/cachedGetter"
+
+import { BASE_TIME_UNIT } from "@/lib/constants"
+
 import LocalEnvironmentPage from "./_components/local-environment"
 import LocalEnvironmentJsonLD from "./page-jsonld"
 
-import { getLocalEnvironmentFrameworkData } from "@/lib/api/ghRepoData"
+import { frameworksList } from "@/lib/data/frameworks"
 
-const loadData = dataLoader([
-  ["frameworksListData", getLocalEnvironmentFrameworkData],
-])
+// In seconds - GitHub repo data doesn't change frequently, so use 24 hours
+const REVALIDATE_TIME = BASE_TIME_UNIT * 24
 
 const Page = async ({ params }: { params: PageParams }) => {
   const { locale } = params
 
   setRequestLocale(locale)
 
-  const [frameworksListData] = await loadData()
+  // Fetch GitHub repo data from data layer with Next.js caching
+  const githubRepoDataResult = await getCachedData<
+    Record<string, { starCount: number; languages: string[] }>
+  >(FETCH_GITHUB_REPO_DATA_TASK_ID, REVALIDATE_TIME)
+
+  // Combine static framework list with GitHub repo data
+  const frameworksListData: Framework[] = frameworksList.map((framework) => {
+    const repoData = githubRepoDataResult?.[framework.githubUrl]
+    return {
+      ...framework,
+      starCount: repoData?.starCount,
+      languages: repoData?.languages?.slice(0, 2),
+    }
+  })
 
   // Get i18n messages
   const allMessages = await getMessages({ locale })