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

Posted 2023-03-08

【中文标题】如何在 NextJS 中使用 Prisma 创建后重新获取数据？

【英文标题】：How to refetch data after create using Prisma in NextJS?

【发布时间】：2021-11-18 14:06:49

【问题描述】：

我在构建时使用 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？

【问题讨论】：

也许您应该将用户数据获取完全移动到客户端，而不是在构建时在getStaticProps 中加载它？

【参考方案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 将使用更新的数据触发重建。