Parallel Routes error too many connections #74454

ggukggukee · 2025-01-01T09:54:43Z

ggukggukee
Jan 1, 2025

How properly fetch data for parallel routes without hitting connection limit?

For example in layout.tsx page i have 4 suspenses and i assume they are fetch at the same time and each one create new prisma connection and if 3 or more people open a website it throw error that i reached the limit.

import { Suspense } from 'react'
import { PostFeed, Weather, Comments, Likes } from './Components'
 
export default function Layout() {
  return (
    <html lang='en'>
      <body>
        <main>
          <Suspense fallback={<p>Loading feed...</p>}>
            <PostFeed />
          </Suspense>
          <Suspense fallback={<p>Loading weather...</p>}>
            <Weather />
          </Suspense>
          <Suspense fallback={<p>Loading comments...</p>}>
            <Comments />
          </Suspense>
          <Suspense fallback={<p>Loading likes...</p>}>
            <Likes />
          </Suspense>
        </main>
      </body>
    </html>
  )
}

And here is @/lib/prisma.ts file

import { PrismaClient } from "@prisma/client";

// PrismaClient is attached to the `global` object in development to prevent
// exhausting your database connection limit.
//
// Learn more:
// https://pris.ly/d/help/next-js-best-practices

const globalForPrisma = global as unknown as { prisma: PrismaClient };

export const prisma = globalForPrisma.prisma || new PrismaClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

export default prisma;

What should i do?
Add 100ms timeout after first suspense so it will not create new connection for each suspense?

icyJoseph · 2025-01-01T14:07:31Z

icyJoseph
Jan 1, 2025
Maintainer

Shouldn't you do this:

import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  if (typeof prisma === 'undefined') {
       prisma = new PrismaClient();
  }
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;

I've searched a bit around, and people do use somewhat similar solutions, even Prisma and Next.js docs, but doing:

  prisma = new PrismaClient();

means that, if many modules, on this JavaScript context pass, invoke a client, it'll invoke just as many.

Should be fine, IIRC, won't be missing with globals either, and will reuse an already created client.

4 replies

ggukggukee Jan 2, 2025
Author

I will try it

icyJoseph Jan 2, 2025
Maintainer

I guess another way would be to use the cache function from React to make a singleton scoped to this render pass

ggukggukee Jan 3, 2025
Author

i get this error: Variable 'prisma' is used before being assigned.

icyJoseph Jan 3, 2025
Maintainer

I changed the proposed code, to a typeof check, could you give it a go?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parallel Routes error too many connections #74454

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Parallel Routes error too many connections #74454

Uh oh!

ggukggukee Jan 1, 2025

Replies: 1 comment · 4 replies

Uh oh!

Uh oh!

icyJoseph Jan 1, 2025 Maintainer

Uh oh!

ggukggukee Jan 2, 2025 Author

Uh oh!

icyJoseph Jan 2, 2025 Maintainer

Uh oh!

ggukggukee Jan 3, 2025 Author

Uh oh!

icyJoseph Jan 3, 2025 Maintainer

ggukggukee
Jan 1, 2025

Replies: 1 comment 4 replies

icyJoseph
Jan 1, 2025
Maintainer

ggukggukee Jan 2, 2025
Author

icyJoseph Jan 2, 2025
Maintainer

ggukggukee Jan 3, 2025
Author

icyJoseph Jan 3, 2025
Maintainer