How to use Pulse with Next.js

I’m trynna figure out what’s the best approach to use Prisma pulse with Next.js (app router), so I came up with this but im not sure if this is the right way to do it

async function setupAllPostsSubscription() {
  const subscription = await prisma.post.subscribe()

  for await (const event of subscription) {
    revalidatePath('/posts')
  }
}

async function setupAllPostsSubscription() {
  const subscription = await prisma.post.subscribe()

  for await (const event of subscription) {
    revalidatePath('/posts')
  }
}

export default async function PostsPage() {

 // Call subscription
 setupSinglePostSubscription()
  
 // Call query
 const posts = await prisma.post.findMany()

  return (
    <article>
      {/* Display posts */}
    </article>
  )
}

export default async function PostsPage() {

 // Call subscription
 setupSinglePostSubscription()
  
 // Call query
 const posts = await prisma.post.findMany()

  return (
    <article>
      {/* Display posts */}
    </article>
  )
}

My understanding is that this will:
1. Set up a subscription when the page loads
2. Listen for any changes to posts
3. Revalidate the page when changes occur
4. Show updated data to all users viewing the page

Is this a good approach? I'm particularly wondering about:
- Whether putting the subscription directly in the page component is optimal
- If there are any issues with connection management I should consider
- Whether I should handle the subscription in a route handler instead
- Or is there a better way to handle this overall

Prisma•16mo ago•

6 replies

isagi

How to use Pulse with Next.js

I’m trynna figure out what’s the best approach to use Prisma pulse with Next.js (app router), so I came up with this but im not sure if this is the right way to do it

async function setupAllPostsSubscription() {
  const subscription = await prisma.post.subscribe()

  for await (const event of subscription) {
    revalidatePath('/posts')
  }
}

async function setupAllPostsSubscription() {
  const subscription = await prisma.post.subscribe()

  for await (const event of subscription) {
    revalidatePath('/posts')
  }
}

export default async function PostsPage() {

 // Call subscription
 setupSinglePostSubscription()
  
 // Call query
 const posts = await prisma.post.findMany()

  return (
    <article>
      {/* Display posts */}
    </article>
  )
}

export default async function PostsPage() {

 // Call subscription
 setupSinglePostSubscription()
  
 // Call query
 const posts = await prisma.post.findMany()

  return (
    <article>
      {/* Display posts */}
    </article>
  )
}

How to use Pulse with Next.js

Similar Threads

How to use Pulse with Next.js

Similar Threads

Similar Threads

Similar Threads