added redis caching to posts, tags and artists

README.md

@@ -39,7 +39,7 @@ brew --version
 # Local development setup
 Firstly as with all projects, clone this repository on your machine:
 ```bash
-git clone https://github.com/t-shah02/dexbooru-rewrite.git
+git clone https://github.com/Dexbooru/dexbooru-web.git
 cd dexbooru-rewrite
 ```
 
@@ -64,8 +64,11 @@ DB_PASSWORD="root"
 DB_SCHEMA="public"
 DB_HOST="host.docker.internal"
 DATABASE_URL="postgresql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME}?schema=${DB_SCHEMA}"
+DB_REDIS_HOST="localhost"
 DB_REDIS_PORT="6379"
+DB_REDIS_USER="default"
 DB_REDIS_PASSWORD="root"
+DB_REDIS_URL="redis://${DB_REDIS_USER}:${DB_REDIS_PASSWORD}@${DB_REDIS_HOST}:${DB_REDIS_PORT}"
 
 # AWS secrets, base urls and S3 bucket names
 AWS_ACCESS_KEY_ID=

docker/postgres/docker-compose.yml

@@ -9,7 +9,8 @@ services:
       POSTGRES_USER: ${DB_USER}
       POSTGRES_PASSWORD: ${DB_PASSWORD}
     ports:
-      - "${DB_PORT}:5432"
+      - "${DB_PORT}:${DB_PORT}"
     volumes:
       - ./data:/var/lib/postgresql/data
     container_name: dexbooru-postgres
+

docker/redis/docker-compose.yml

@@ -4,8 +4,10 @@ services:
   redis:
     image: redis:latest
     ports:
-      - "${DB_REDIS_PORT}:6379"
+      - "${DB_REDIS_PORT}:${DB_REDIS_PORT}"
     environment:
+      REDIS_HOST: ${DB_REDIS_HOST}
+      REDIS_USER: ${DB_REDIS_USER}
       REDIS_PASSWORD: ${DB_REDIS_PASSWORD}
       REDIS_DISABLE_COMMANDS: "FLUSHDB,FLUSHALL"
     volumes:

package.json

@@ -43,7 +43,7 @@
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
-		"prisma": "^5.9.1",
+		"prisma": "^5.10.2",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"tailwindcss": "^3.3.2",
@@ -56,10 +56,12 @@
 	"type": "module",
 	"dependencies": {
 		"@aws-sdk/client-s3": "^3.421.0",
-		"@prisma/client": "^5.9.1",
+		"@prisma/client": "^5.10.2",
+		"@vercel/analytics": "^1.2.2",
 		"@zerodevx/svelte-toast": "^0.9.5",
 		"bcryptjs": "^2.4.3",
 		"jsonwebtoken": "^9.0.2",
+		"redis": "^4.6.13",
 		"sharp": "^0.32.6"
 	},
 	"lint-staged": {

scripts/setup-db.sh

@@ -1,14 +1,27 @@
 #!/bin/bash
 
+ENV_LOCAL_FILE_PATH="../.env.local"
+ENV_LOCAL_FILE_PATH_DOCKER="../../.env.local"
+
+echo "Reading .env.local variables into script environment"
+export $(egrep -v '^#' $ENV_LOCAL_FILE_PATH | xargs)
+
 cd ../docker/postgres
 echo "Composing dexbooru database container from Docker Postgres image"
-docker-compose --env-file "../../.env.local" up -d
+docker-compose --env-file $ENV_LOCAL_FILE_PATH_DOCKER up -d
 
 cd ../redis
 echo "Composing dexbooru redis container from Docker Redis image"
-docker-compose --env-file "../../.env.local" up -d
+docker-compose --env-file $ENV_LOCAL_FILE_PATH_DOCKER up -d
+
+echo "Configuring permissions for the user called $DB_USER on the database called $DB_NAME"
+docker exec -it dexbooru-postgres psql -U ${DB_USER} -d ${DB_NAME} -c "ALTER USER ${DB_USER} WITH SUPERUSER;"
+docker exec -it dexbooru-postgres psql -U ${DB_USER} -d ${DB_NAME} -c "GRANT ALL PRIVILEGES ON DATABASE ${DB_NAME} TO ${DB_USER};"
+docker exec -it dexbooru-postgres psql -U ${DB_USER} -d ${DB_NAME} -c "GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA ${DB_SCHEMA} TO ${DB_USER};"
 
 cd ../../
 echo "Migrating schemas and Seeding the database with mock data"
-yarn dbmigrate:dev
+yarn dbreset:dev
+
+
 

src/lib/client/components/search/GlobalSearchbar.svelte

@@ -8,7 +8,7 @@
 	<div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
 		<SearchOutline class="w-4 h-4" />
 	</div>
-	<div class="flex space-x-2 absolute inset-y-0 end-8 items-center ps-3 pointer-events-none">
+	<div class="flex space-x-2 absolute inset-y-0 end-11 items-center ps-3 pointer-events-none">
 		<Kbd class="p-1">CTRL</Kbd>
 		<Kbd class="p-1">K</Kbd>
 	</div>

src/lib/server/constants/database.ts

@@ -0,0 +1 @@
+export const REDIS_URL = process.env.DB_REDIS_URL ?? '';

src/lib/server/db/prisma.ts

@@ -1,11 +1,49 @@
 import { PrismaClient } from '@prisma/client';
+import { cacheQuery } from '../helpers/database';
+
+type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;
 
 const prismaClientSingleton = () => {
-	return new PrismaClient();
+	return new PrismaClient().$extends({
+		name: 'redis-query-cache',
+		query: {
+			post: {
+				async findFirst({ args, query }) {
+					return await cacheQuery<typeof args>(args, query);
+				},
+				async findMany({ args, query }) {
+					return await cacheQuery<typeof args>(args, query);
+				},
+				async findUnique({ args, query }) {
+					return await cacheQuery<typeof args>(args, query);
+				}
+			},
+			tag: {
+				async findFirst({ args, query }) {
+					return await cacheQuery<typeof args>(args, query);
+				},
+				async findMany({ args, query }) {
+					return await cacheQuery<typeof args>(args, query);
+				},
+				async findUnique({ args, query }) {
+					return await cacheQuery<typeof args>(args, query);
+				}
+			},
+			artist: {
+				async findFirst({ args, query }) {
+					return await cacheQuery<typeof args>(args, query);
+				},
+				async findMany({ args, query }) {
+					return await cacheQuery<typeof args>(args, query);
+				},
+				async findUnique({ args, query }) {
+					return await cacheQuery<typeof args>(args, query);
+				}
+			}
+		}
+	});
 };
 
-type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;
-
 const globalForPrisma = globalThis as unknown as {
 	prisma: PrismaClientSingleton | undefined;
 };

src/lib/server/db/redis.ts

@@ -0,0 +1,22 @@
+import { createClient } from 'redis';
+import { REDIS_URL } from '../constants/database';
+
+type RedisClientSingleton = Awaited<ReturnType<typeof redisClientSingleton>>;
+
+const redisClientSingleton = async () => {
+	return await createClient({
+		url: REDIS_URL
+	}).connect();
+};
+
+const globalForRedis = globalThis as unknown as {
+	redis: RedisClientSingleton | undefined;
+};
+
+const redis = globalForRedis.redis ?? (await redisClientSingleton());
+
+if (process.env.NODE_ENV !== 'production') {
+	globalForRedis.redis = redis;
+}
+
+export default redis;

src/lib/server/helpers/database.ts

@@ -0,0 +1,14 @@
+import redis from '$lib/server/db/redis';
+
+export async function cacheQuery<ArgsType>(args: ArgsType, query: CallableFunction) {
+	const stringifiedArgs = JSON.stringify(args);
+	const queryCacheResult = await redis.get(stringifiedArgs);
+	if (queryCacheResult) {
+		return JSON.parse(queryCacheResult);
+	}
+
+	const queryResults = await query(args);
+	await redis.set(stringifiedArgs, JSON.stringify(queryResults), { EX: 30 });
+
+	return queryResults;
+}

src/lib/shared/helpers/dates.ts

@@ -39,7 +39,11 @@ export function getTimeDifferenceString(targetDatetime: Date) {
 	return `${years} year${years !== 1 ? 's' : ''} ago`;
 }
 
-export function formatDate(date: Date): string {
+export function formatDate(date: Date | string): string {
+	if (typeof date === 'string') {
+		date = new Date(date);
+	}
+
 	const options: Intl.DateTimeFormatOptions = {
 		year: 'numeric',
 		month: '2-digit',

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { dev } from '$app/environment';
 	import { page } from '$app/stores';
 	import { getNotifications } from '$lib/client/api/notifications';
 	import Footer from '$lib/client/components/layout/Footer.svelte';
@@ -18,13 +19,16 @@
 	import { notificationStore } from '$lib/client/stores/notifications';
 	import { authenticatedUserStore } from '$lib/client/stores/users';
 	import type { IUserNotifications } from '$lib/shared/types/notifcations';
+	import { inject as injectAnalytics } from '@vercel/analytics';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onMount } from 'svelte';
 	import '../app.postcss';
 
 	authenticatedUserStore.set($page.data.user || null);
 
 	onMount(async () => {
+		injectAnalytics({ mode: dev ? 'development' : 'production' });
+
 		registerDocumentEventListeners();
 
 		const deviceData = getDeviceDetectionDataFromWindow();