Use React’s cache to avoid some queries to the database

src/app/cached-functions.ts

@@ -0,0 +1,17 @@
+import { getGroup } from '@/lib/api'
+import { cache } from 'react'
+
+function logAndCache<P extends any[], R>(fn: (...args: P) => R) {
+  const cached = cache((...args: P) => {
+    // console.log(`Not cached: ${fn.name}…`)
+    return fn(...args)
+  })
+  return (...args: P) => {
+    // console.log(`Calling cached ${fn.name}…`)
+    return cached(...args)
+  }
+}
+
+export const cached = {
+  getGroup: logAndCache(getGroup),
+}

src/app/groups/[groupId]/balances/page.tsx

@@ -1,3 +1,4 @@
+import { cached } from '@/app/cached-functions'
 import { BalancesList } from '@/app/groups/[groupId]/balances-list'
 import { ReimbursementList } from '@/app/groups/[groupId]/reimbursement-list'
 import {
@@ -7,7 +8,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
-import { getGroup, getGroupExpenses } from '@/lib/api'
+import { getGroupExpenses } from '@/lib/api'
 import { getBalances, getSuggestedReimbursements } from '@/lib/balances'
 import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
@@ -21,7 +22,7 @@ export default async function GroupPage({
 }: {
   params: { groupId: string }
 }) {
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
   const expenses = await getGroupExpenses(groupId)

src/app/groups/[groupId]/edit/page.tsx

@@ -1,5 +1,6 @@
+import { cached } from '@/app/cached-functions'
 import { GroupForm } from '@/components/group-form'
-import { getGroup, getGroupExpensesParticipants, updateGroup } from '@/lib/api'
+import { getGroupExpensesParticipants, updateGroup } from '@/lib/api'
 import { groupFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
@@ -13,7 +14,7 @@ export default async function EditGroupPage({
 }: {
   params: { groupId: string }
 }) {
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
   async function updateGroupAction(values: unknown) {

src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx

@@ -1,9 +1,9 @@
+import { cached } from '@/app/cached-functions'
 import { ExpenseForm } from '@/components/expense-form'
 import {
   deleteExpense,
   getCategories,
   getExpense,
-  getGroup,
   updateExpense,
 } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
@@ -21,7 +21,7 @@ export default async function EditExpensePage({
   params: { groupId: string; expenseId: string }
 }) {
   const categories = await getCategories()
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
   if (!group) notFound()
   const expense = await getExpense(groupId, expenseId)
   if (!expense) notFound()

src/app/groups/[groupId]/expenses/create/page.tsx

@@ -1,5 +1,6 @@
+import { cached } from '@/app/cached-functions'
 import { ExpenseForm } from '@/components/expense-form'
-import { createExpense, getCategories, getGroup } from '@/lib/api'
+import { createExpense, getCategories } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
@@ -15,7 +16,7 @@ export default async function ExpensePage({
   params: { groupId: string }
 }) {
   const categories = await getCategories()
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
   async function createExpenseAction(values: unknown) {

src/app/groups/[groupId]/expenses/page.tsx

@@ -1,3 +1,4 @@
+import { cached } from '@/app/cached-functions'
 import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
 import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
 import { Button } from '@/components/ui/button'
@@ -9,13 +10,15 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
-import { getGroup, getGroupExpenses } from '@/lib/api'
+import { getGroupExpenses } from '@/lib/api'
 import { Download, Plus } from 'lucide-react'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { Suspense } from 'react'
 
+export const revalidate = 3600
+
 export const metadata: Metadata = {
   title: 'Expenses',
 }
@@ -25,7 +28,7 @@ export default async function GroupExpensesPage({
 }: {
   params: { groupId: string }
 }) {
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
   return (
@@ -84,7 +87,7 @@ export default async function GroupExpensesPage({
 }
 
 async function Expenses({ groupId }: { groupId: string }) {
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
   if (!group) notFound()
   const expenses = await getGroupExpenses(group.id)
 

src/app/groups/[groupId]/layout.tsx

@@ -1,7 +1,7 @@
+import { cached } from '@/app/cached-functions'
 import { GroupTabs } from '@/app/groups/[groupId]/group-tabs'
 import { SaveGroupLocally } from '@/app/groups/[groupId]/save-recent-group'
 import { ShareButton } from '@/app/groups/[groupId]/share-button'
-import { getGroup } from '@/lib/api'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
@@ -16,7 +16,7 @@ type Props = {
 export async function generateMetadata({
   params: { groupId },
 }: Props): Promise<Metadata> {
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
 
   return {
     title: {
@@ -30,7 +30,7 @@ export default async function GroupLayout({
   children,
   params: { groupId },
 }: PropsWithChildren<Props>) {
-  const group = await getGroup(groupId)
+  const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
   return (

src/lib/prisma.ts

@@ -9,7 +9,9 @@ export async function getPrisma() {
       prisma = new PrismaClient()
     } else {
       if (!(global as any).prisma) {
-        ;(global as any).prisma = new PrismaClient()
+        ;(global as any).prisma = new PrismaClient({
+          // log: [{ emit: 'stdout', level: 'query' }],
+        })
       }
       prisma = (global as any).prisma
     }