How to refetch data after create using Prisma in NextJS?

user_11767525 0
Viewed 344

I'm loading data at build time using getStaticProps.

export const getStaticProps: GetStaticProps = async () => {
  const users = await prisma.user.findMany()
  return {
    props: { users }
  }
}

I have a form that creates new data:

const handleSubmit = async ({ name, score }) => {
  const body = { name, email }
  await fetch(`http://localhost:3000/api/users/post`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body)
  }
}

After submitting a form, I would like to refetch the users to display the new one in real time without reloading the page.

In Apollo Client there's a function called refetchQueries that is here to easily do just that, i.e. re-run the graphQL query whenever the mutation happened. Is there a way to do a similar thing here, using plain NextJs+Prisma without graphQL?

prisma-graphql apollo-client prisma graphql next.js
1 Answers

What you're looking for is Incremental Static Regeneration (ISR)

export const getStaticProps: GetStaticProps = async () => {
  const users = await prisma.user.findMany()
  return {
    props: { users },
    revalidate: 60,
  }
}

You can define a revalidation time per-page (e.g. 60 seconds). The initial request will show the cached page, and when the data gets updated, Next.js will trigger a rebuild with the updated data.

user_79540110
Related