Cache Contentful data in Redis (#3266)

scriptex · web-flow · commit aa09d90da170 · 2025-08-21T10:39:02.000+03:00
diff --git a/.env.local.example b/.env.local.example
@@ -1,18 +1,19 @@
-GTM_ID=''
-MONGODB_URI=MONGODB_URI=mongodb+srv://<USERNAME>:<PASSWORD>@<CLUSTER>.vfjpiol.mongodb.net/?retryWrites=true&w=majority
-GITHUB_TOKEN=''
-GITLAB_TOKEN=''
-VERCEL_ORG_ID=''
-LAST_FM_API_KEY=''
-SONARCLOUD_TOKEN=''
-VERCEL_PROJECT_ID=''
-NEXT_PUBLIC_GTM_ID=''
-CLOUDINARY_API_KEY=''
-SENDINBLUE_API_KEY=''
-CONTENTFUL_SPACE_ID=''
-CODACY_PROJECT_TOKEN=''
-CLOUDINARY_API_SECRET=''
-CLOUDINARY_CLOUD_NAME=''
-CONTENTFUL_ACCESS_TOKEN=''
-CONTENTFUL_PREVIEW_ACCESS_TOKEN=''
-NEXT_PUBLIC_HONEYPOT_VALUE=''
+# vercel env pull
+CONTENTFUL_ACCESS_TOKEN=""
+CONTENTFUL_PREVIEW_ACCESS_TOKEN=""
+CONTENTFUL_SPACE_ID=""
+EDGE_CONFIG=""
+GITHUB_TOKEN=""
+GITLAB_TOKEN=""
+GITLAB_TOKEN_ORG=""
+GTM_ID=""
+LAST_FM_API_KEY=""
+MONGODB_URI=""
+NEXT_PUBLIC_GTM_ID=""
+NEXT_PUBLIC_HONEYPOT_VALUE=""
+REDIS_URL=""
+SENDINBLUE_API_KEY=""
+VERCEL_OIDC_TOKEN=""
+CLOUDINARY_API_KEY=""
+CLOUDINARY_API_SECRET=""
+CLOUDINARY_CLOUD_NAME=""
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -24,6 +24,7 @@ jobs:
                   yarn type-coverage
               env:
                   GTM_ID: ${{ secrets.GTM_ID }}
+                  REDIS_URL: ${{ secrets.REDIS_URL }}
                   MONGODB_URI: ${{ secrets.MONGODB_URI }}
                   GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
                   GITLAB_TOKEN: ${{ secrets.GITLAB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -28,6 +28,7 @@ Thumbs.db
 .env.local
 .type-coverage
 tsconfig.tsbuildinfo
+/cms
 /coverage
 /email/*.html
 /dist
diff --git a/README.md b/README.md
@@ -20,30 +20,31 @@
 
 A fullstack progressive web app built with
 
--   [Typescript](https://www.typescriptlang.org/)
--   [PostCSS](https://postcss.org/)
--   [Markdown](https://www.markdownguide.org/)/[MDX](https://mdxjs.com/)
--   [Javascript](https://www.javascript.com/)
--   [Bash](https://www.gnu.org/software/bash/)
--   [MJML](https://mjml.io/)
--   [Vercel](https://vercel.com/)
--   [NodeJS](https://nodejs.org/)
--   [TS Node](https://typestrong.org/ts-node/)
--   [NextJS](https://nextjs.org/)
--   [Cloudinary](https://cloudinary.com/)
--   [Puppeteer](https://pptr.dev/)
--   [MongoDB](https://www.mongodb.com/)
--   [React](https://reactjs.org/)
--   [D3](https://d3js.org/)
--   [BabylonJS](https://www.babylonjs.com/)
--   [Houdini](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Houdini)
--   [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)
--   [ESLint](https://eslint.org/)
--   [Stylelint](https://stylelint.io/)
--   [Prettier](https://prettier.io/)
--   [Jest](https://jestjs.io/)
--   [Husky](https://typicode.github.io/husky/)
--   [Contentful](https://www.contentful.com/)
+- [Typescript](https://www.typescriptlang.org/)
+- [PostCSS](https://postcss.org/)
+- [Markdown](https://www.markdownguide.org/)/[MDX](https://mdxjs.com/)
+- [Javascript](https://www.javascript.com/)
+- [Bash](https://www.gnu.org/software/bash/)
+- [MJML](https://mjml.io/)
+- [Vercel](https://vercel.com/)
+- [NodeJS](https://nodejs.org/)
+- [TS Node](https://typestrong.org/ts-node/)
+- [NextJS](https://nextjs.org/)
+- [Cloudinary](https://cloudinary.com/)
+- [Puppeteer](https://pptr.dev/)
+- [MongoDB](https://www.mongodb.com/)
+- [Redis](https://redis.io/)
+- [React](https://reactjs.org/)
+- [D3](https://d3js.org/)
+- [BabylonJS](https://www.babylonjs.com/)
+- [Houdini](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Houdini)
+- [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)
+- [ESLint](https://eslint.org/)
+- [Stylelint](https://stylelint.io/)
+- [Prettier](https://prettier.io/)
+- [Jest](https://jestjs.io/)
+- [Husky](https://typicode.github.io/husky/)
+- [Contentful](https://www.contentful.com/)
 
 ## Visitor stats
 
diff --git a/lib/cms-cache.ts b/lib/cms-cache.ts
@@ -0,0 +1,54 @@
+import { createClient } from 'contentful';
+
+import { CMSType, RawCMSData } from '@scripts/cms';
+
+import { getRedisClient } from './redis';
+
+const contentfulClient = createClient({
+	accessToken: process.env.CONTENTFUL_ACCESS_TOKEN!,
+	space: process.env.CONTENTFUL_SPACE_ID!
+});
+
+const CACHE_TTL = 640000;
+
+export async function getCMSData(type: CMSType): Promise<RawCMSData> {
+	const redis = await getRedisClient();
+	const cacheKey = `contentful:${type}`;
+	const cached = await redis.get(cacheKey);
+
+	if (cached) {
+		return JSON.parse(cached);
+	}
+
+	const data = await fetchFromContentful(type);
+
+	await redis.set(cacheKey, JSON.stringify(data), { EX: CACHE_TTL });
+
+	return data;
+}
+
+export async function refreshCMSData(type: CMSType): Promise<RawCMSData> {
+	const redis = await getRedisClient();
+	const cacheKey = `contentful:${type}`;
+	const data = await fetchFromContentful(type);
+
+	await redis.set(cacheKey, JSON.stringify(data), { EX: CACHE_TTL });
+
+	return data;
+}
+
+async function fetchFromContentful(type: CMSType): Promise<RawCMSData> {
+	const contentTypes = await contentfulClient.getContentTypes();
+	const content_type = contentTypes.items.find(item => item.name.toLowerCase() === type)?.sys.id;
+
+	if (!content_type) {
+		return {
+			items: [],
+			limit: 0,
+			skip: 0,
+			total: 0
+		};
+	}
+
+	return await contentfulClient.getEntries({ content_type, order: ['fields.index'] });
+}
diff --git a/lib/redis.ts b/lib/redis.ts
@@ -0,0 +1,16 @@
+import { createClient } from 'redis';
+
+let redisClient: ReturnType<typeof createClient> | null = null;
+
+export async function getRedisClient() {
+	if (!redisClient) {
+		redisClient = createClient({
+			url: process.env.REDIS_URL // e.g. "redis://:<password>@<host>:<port>"
+		});
+
+		redisClient.on('error', err => console.error('Redis Client Error', err));
+
+		await redisClient.connect();
+	}
+	return redisClient;
+}
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
@@ -53,10 +53,10 @@
 	},
 	"dependencies": {
 		"@apollo/client": "3.13.9",
-		"@babylonjs/core": "8.22.2",
-		"@babylonjs/gui": "8.22.2",
-		"@babylonjs/loaders": "8.22.2",
-		"@babylonjs/materials": "8.22.2",
+		"@babylonjs/core": "8.23.2",
+		"@babylonjs/gui": "8.23.2",
+		"@babylonjs/loaders": "8.23.2",
+		"@babylonjs/materials": "8.23.2",
 		"@codersrank/activity": "0.9.14",
 		"@codersrank/education": "0.9.12",
 		"@codersrank/portfolio": "0.9.10",
@@ -73,7 +73,7 @@
 		"animateme": "2.4.2",
 		"async-array-prototype": "1.1.1",
 		"attr-i18n": "1.0.0",
-		"babylonjs-gltf2interface": "8.22.2",
+		"babylonjs-gltf2interface": "8.23.2",
 		"contentful": "11.7.15",
 		"d3": "7.9.0",
 		"date-fns": "4.1.0",
@@ -92,7 +92,7 @@
 		"jsdom": "26.1.0",
 		"lottie-web": "5.13.0",
 		"mongodb": "6.18.0",
-		"next": "15.4.6",
+		"next": "15.5.0",
 		"next-sitemap": "4.2.3",
 		"npm-maintainer": "1.0.2",
 		"pass-score": "2.0.0",
@@ -106,9 +106,10 @@
 		"react-gtm-module": "2.0.11",
 		"react-modal": "3.16.3",
 		"react-round-carousel": "1.5.0",
-		"react-slick": "0.30.3",
+		"react-slick": "0.31.0",
 		"react-svg-donuts": "3.0.0",
 		"react-vertical-timeline-component": "3.6.0",
+		"redis": "5.8.2",
 		"round-carousel-component": "1.2.1",
 		"scriptex-socials": "1.9.1",
 		"scss-goodies": "2.2.0",
@@ -118,45 +119,45 @@
 		"svg64": "2.0.0",
 		"swiper": "11.2.10",
 		"touchsweep": "2.2.0",
-		"tough-cookie": "5.1.2",
+		"tough-cookie": "6.0.0",
 		"typed-usa-states": "2.1.0",
 		"universal-github-client": "1.0.3",
 		"use-interval": "1.4.0",
 		"uuid": "11.1.0"
 	},
 	"devDependencies": {
-		"@babel/core": "7.28.0",
+		"@babel/core": "7.28.3",
 		"@eslint/compat": "1.3.2",
 		"@eslint/eslintrc": "3.3.1",
-		"@eslint/js": "9.32.0",
-		"@next/env": "15.4.6",
+		"@eslint/js": "9.33.0",
+		"@next/env": "15.5.0",
 		"@svgr/webpack": "8.1.0",
 		"@testing-library/dom": "10.4.1",
-		"@testing-library/jest-dom": "6.6.4",
+		"@testing-library/jest-dom": "6.7.0",
 		"@testing-library/react": "16.3.0",
 		"@types/d3": "7.4.3",
 		"@types/jest": "30.0.0",
 		"@types/markdown-it": "14.1.2",
 		"@types/mjml": "4.7.4",
-		"@types/node": "24.2.1",
-		"@types/react": "19.1.9",
+		"@types/node": "24.3.0",
+		"@types/react": "19.1.10",
 		"@types/react-copy-to-clipboard": "5.0.7",
 		"@types/react-dom": "19.1.7",
 		"@types/react-gtm-module": "2.0.4",
 		"@types/react-modal": "3.16.3",
 		"@types/react-slick": "0.23.13",
 		"@types/react-vertical-timeline-component": "3.3.6",
 		"@types/uuid": "10.0.0",
-		"@typescript-eslint/eslint-plugin": "8.39.0",
-		"@typescript-eslint/parser": "8.39.0",
+		"@typescript-eslint/eslint-plugin": "8.40.0",
+		"@typescript-eslint/parser": "8.40.0",
 		"autoprefixer": "10.4.21",
-		"browserslist": "4.25.2",
+		"browserslist": "4.25.3",
 		"cheerio": "1.1.2",
 		"cloudinary": "2.7.0",
 		"commander": "14.0.0",
 		"dotenv": "17.2.1",
-		"eslint": "9.32.0",
-		"eslint-config-next": "15.4.6",
+		"eslint": "9.33.0",
+		"eslint-config-next": "15.5.0",
 		"eslint-config-prettier": "10.1.8",
 		"eslint-plugin-compat": "6.0.2",
 		"eslint-plugin-import": "2.32.0",
@@ -201,7 +202,7 @@
 		"postcss-utilities": "0.8.4",
 		"postcss-watch-folder": "2.0.0",
 		"prettier": "3.6.2",
-		"puppeteer": "24.15.0",
+		"puppeteer": "24.17.0",
 		"sass": "1.90.0",
 		"serwist": "9.1.1",
 		"stylelint": "16.23.1",
@@ -215,11 +216,11 @@
 		"ts-node": "10.9.2",
 		"tsconfig-paths": "4.2.0",
 		"tslib": "2.8.1",
-		"tsx": "4.20.3",
+		"tsx": "4.20.4",
 		"type-coverage": "2.29.7",
 		"typescript": "5.9.2",
 		"universal-github-client": "1.0.3",
-		"webpack": "5.101.0"
+		"webpack": "5.101.3"
 	},
 	"private": true,
 	"browserslist": [
diff --git a/renovate.json b/renovate.json
@@ -1,6 +1,5 @@
 {
 	"assignees": ["@scriptex"],
-  "enabled": false,
 	"extends": [
 		"config:base",
 		":automergePatch",
diff --git a/src/pages/api/refresh-cms/route.ts b/src/pages/api/refresh-cms/route.ts
@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+
+import { refreshCMSData } from '@lib/cms-cache';
+import { allCMSTypes } from '@scripts/cms';
+
+export const POST = async () => {
+	try {
+		for (const type of allCMSTypes) {
+			try {
+				await refreshCMSData(type);
+			} catch (err) {
+				console.error(`Failed to refresh ${type}`, err);
+			}
+		}
+
+		return NextResponse.json({ refreshed: true });
+	} catch (err) {
+		console.error(err);
+		return NextResponse.json({ error: 'Failed to refresh all content' }, { status: 500 });
+	}
+};
diff --git a/src/scripts/cms.ts b/src/scripts/cms.ts
diff --git a/tests/src/components/portfolio/__snapshots__/index.tsx.snap b/tests/src/components/portfolio/__snapshots__/index.tsx.snap
diff --git a/tests/src/pages/portfolio/__snapshots__/automotive-applications.tsx.snap b/tests/src/pages/portfolio/__snapshots__/automotive-applications.tsx.snap
diff --git a/tests/src/pages/portfolio/__snapshots__/mobile-applications.tsx.snap b/tests/src/pages/portfolio/__snapshots__/mobile-applications.tsx.snap
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"assignees": ["@scriptex"],`
`3`		`- "enabled": false,`
`4`	`3`	`"extends": [`
`5`	`4`	`"config:base",`
`6`	`5`	`":automergePatch",`