Following recommended best practices for using prisma in nextjs

// https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#solution This solves the issue on the server of (Warn 10 Instances of Prisma Client have been detected)
csprance · Jul 28, 2022 · 8c74a47 · 8c74a47
1 parent 699cd70
commit 8c74a47
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/lib/prisma.ts b/lib/prisma.ts
@@ -0,0 +1,16 @@
+// https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#solution
+import { PrismaClient } from '@prisma/client';
+
+declare global {
+  // allow global `var` declarations
+  // eslint-disable-next-line no-var
+  var prisma: PrismaClient | undefined;
+}
+
+export const prisma =
+  global.prisma ||
+  new PrismaClient({
+    log: ['query'],
+  });
+
+if (process.env.NODE_ENV !== 'production') global.prisma = prisma;
diff --git a/pages/[tinyurl].tsx b/pages/[tinyurl].tsx
@@ -1,10 +1,10 @@
-import { PrismaClient } from '@prisma/client';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import React from 'react';
 
 import Graph from '../components/Graph';
 import Gui from '../components/Gui';
 import Header from '../components/Header';
+import { prisma } from '../lib/prisma';
 
 // When we hit a page with a tinyurl go and find that from the db and return it as the
 // Initial state
@@ -18,7 +18,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
   // Query our database to see if we have the url.
   // const AppDataSource = await getDataSource();
-  const prisma = new PrismaClient();
   const results = await prisma.tiny_url.findFirst({
     where: {
       url: tinyurl,
@@ -28,23 +27,19 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   if (!results) {
     return { props: {} };
   }
-  prisma.tiny_url
-    .update({
-      where: { id: results.id },
-      data: { hits: results.hits + 1 },
-    })
-    .then(() => {
-      prisma.$disconnect();
-    });
+  prisma.tiny_url.update({
+    where: { id: results.id },
+    data: { hits: results.hits + 1 },
+  });
   // Return results
   return {
     props: { initialZustandState: results.value },
   };
 };
 
-function TinyUrlPage({
-  state,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+function TinyUrlPage({}: InferGetServerSidePropsType<
+  typeof getServerSideProps
+>) {
   return (
     <>
       <Header />

diff --git a/pages/api/tinyurl.ts b/pages/api/tinyurl.ts
@@ -1,8 +1,8 @@
-import { PrismaClient } from '@prisma/client';
 import httpStatus from 'http-status';
 import { NextApiRequest, NextApiResponse } from 'next';
 import hash from 'object-hash';
 
+import { prisma } from '../../lib/prisma';
 import { createUniqueRandomKey } from '../../lib/utils';
 
 /**
@@ -27,7 +27,6 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
   // Add the new item
   if (method === 'POST') {
     const hashedJSON = hash({ ...state, grapher: null });
-    const prisma = new PrismaClient();
     // If we have an url that exists already with the same hash return that instead
     const existingTinyUrl = await prisma.tiny_url.findFirst({
       where: { hash: hashedJSON },
@@ -45,7 +44,6 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
         hits: 0,
       },
     });
-    prisma.$disconnect();
     return res.status(httpStatus.OK).send({ ...tinyurl });
   }