feat: add cache invalidation example app (#6731)

* feat: add cache invalidation example app

* fix: add README.md

* Update accelerate/accelerate-hacker-news/package.json

Author: ankur-arch

accelerate/accelerate-hacker-news/.env.example

@@ -0,0 +1,2 @@
+DIRECT_URL=
+DATABASE_URL=

accelerate/accelerate-hacker-news/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

accelerate/accelerate-hacker-news/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+prisma/migrations
+package-lock.json

accelerate/accelerate-hacker-news/README.md

@@ -0,0 +1,85 @@
+# Prisma Accelerate Hacker News Clone
+
+This project showcases how to use Prisma ORM with Prisma Accelerate, leveraging caching and on-demand cache invalidation, in a Next.js application to build a minimal Hacker News clone.
+
+This app retrieves and caches the [top 20 latest posts](/app/page.tsx#L8) with a long Time-to-Live ([TTL](https://www.prisma.io/docs/accelerate/caching#time-to-live-ttl)). The cache is invalidated on-demand whenever a post is [upvoted](/app/actions/addVotes.ts) or a [new post is added](/app/submit/actions/addPost.ts).
+
+![GIF of interaction](demo.gif)
+
+## Prerequisites
+
+To successfully run the project, you will need the following:
+
+- The **connection string** of a PostgreSQL database
+- Your **Accelerate connection string** (containing your **Accelerate API key**) which you can get by enabling Accelerate in a project in your [Prisma Data Platform](https://pris.ly/pdp) account (learn more in the [docs](https://www.prisma.io/docs/platform/concepts/environments#api-keys))
+
+## Getting started
+
+### 1. Clone the repository
+
+Clone the repository, navigate into it and install dependencies:
+
+```
+git clone git@github.com:prisma/prisma-examples.git --depth=1
+cd prisma-examples/accelerate/accelerate-hacker-news
+npm install
+```
+
+### 2. Configure environment variables
+
+Create a `.env` in the root of the project directory:
+
+```bash
+cp .env.example .env
+```
+
+Now, open the `.env` file and set the `DATABASE_URL` and `DIRECT_URL` environment variables with the values of your connection string and your Accelerate connection string:
+
+```bash
+# .env
+
+# Accelerate connection string (used for queries by Prisma Client)
+DATABASE_URL="__YOUR_ACCELERATE_CONNECTION_STRING__"
+
+# Database connection string (used for migrations by Prisma Migrate)
+DIRECT_URL="__YOUR_DATABASE_CONNECTION_STRING__"
+```
+
+Note that `__YOUR_DATABASE_CONNECTION_STRING__` and `__YOUR_ACCELERATE_CONNECTION_STRING__` are placeholder values that you need to replace with the values of your database and Accelerate connection strings. Notice that the Accelerate connection string has the following structure: `prisma://accelerate.prisma-data.net/?api_key=__YOUR_ACCELERATE_API_KEY__`.
+
+### 3. Run a migration to create the `Post` table
+
+The Prisma schema file contains a single `Post` model. You can map this model to the database and create the corresponding `Post` table using the following command:
+
+```
+npx prisma migrate dev --name init
+```
+
+### 4. Generate Prisma Client for Accelerate
+
+When using Accelerate, Prisma Client doesn't need a query engine. That's why you should generate it as follows:
+
+```
+npx prisma generate --no-engine
+```
+
+### 5. Start the app
+
+You can run the app with the following command:
+
+```
+npm run dev
+```
+
+You should now be able to:
+
+- See the most recent post at http://localhost:3000 and upvote it by clicking the ▲ button.
+- Submit a new post by navigating to http://localhost:3000/submit.
+
+When you make changes, it might take a few seconds to invalidate the cache and display the latest changes.
+
+## Resources
+
+- [Accelerate Speed Test](https://accelerate-speed-test.vercel.app/)
+- [Accelerate documentation](https://www.prisma.io/docs/accelerate)
+- [Prisma Discord](https://pris.ly/discord)

accelerate/accelerate-hacker-news/app/actions/addVotes.ts

@@ -0,0 +1,26 @@
+'use server'
+
+import prisma from '@/lib/db'
+
+export async function addVotes(id: number) {
+  // console.log({
+  //   updating: id,
+  // })
+
+  await prisma.post.update({
+    where: {
+      id: id,
+    },
+    data: {
+      vote: {
+        increment: 1,
+      },
+    },
+  })
+
+  await prisma.$accelerate.invalidate({
+    tags: ['posts'],
+  })
+
+  return id
+}

accelerate/accelerate-hacker-news/app/favicon.ico

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

accelerate/accelerate-hacker-news/app/fonts/GeistMonoVF.woff

@@ -0,0 +1,37 @@
+import type { Metadata } from 'next'
+import localFont from 'next/font/local'
+import './globals.css'
+
+const geistSans = localFont({
+  src: './fonts/GeistVF.woff',
+  variable: '--font-geist-sans',
+  weight: '100 900',
+})
+const geistMono = localFont({
+  src: './fonts/GeistMonoVF.woff',
+  variable: '--font-geist-mono',
+  weight: '100 900',
+})
+
+export const metadata: Metadata = {
+  title: 'Accelerate Hacker News Clone',
+  description: 'A minimal hackernews clone using Prisma Accelerate',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <div className="pl-8 pr-8 md:pl-12 md:pr-12 bg-slate-100 h-screen overflow-scroll">
+          <div className="h-full flex flex-col">{children}</div>
+        </div>
+      </body>
+    </html>
+  )
+}