如何在 NextJS 中使用 Prisma 创建后重新获取数据？

Question

我在构建时使用 getStaticProps.

加载数据

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

我有一个创建新数据的表单：

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)
  }
}

提交表单后，我想重新获取用户以实时显示新表单，而无需重新加载页面。

在 Apollo Client 中有一个名为 refetchQueries 的函数可以轻松地做到这一点，即每当发生突变时重新运行 graphQL 查询。有没有办法在这里做类似的事情，使用没有 graphQL 的普通 NextJs+Prisma？

Answer 1

您要找的是 Incremental Static Regeneration (ISR)

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

您可以为每页定义 revalidation 时间（例如 60 秒）。初始请求将显示缓存页面，当数据更新时，Next.js 将触发使用更新后的数据进行重建。

如何在 NextJS 中使用 Prisma 创建后重新获取数据？

How to refetch data after create using Prisma in NextJS?

graphql

next.js

apollo-client

prisma

prisma-graphql