NextJS中使用Prisma创建数据后如何无需刷新页面重新拉取数据？

你提到的需求完全可以不用GraphQL实现，核心思路是客户端维护用户列表状态，提交动作完成后主动触发最新数据的拉取/更新，以下是具体可落地的方案：

方案1：手动封装refetch逻辑（适配Pages Router/App Router通用场景） #

这个方案和Apollo的refetchQueries逻辑完全对齐，实现成本极低：

1. 将getStaticProps返回的初始用户列表作为客户端状态的初始值
2. 封装拉取最新用户列表的方法，提交表单成功后调用该方法更新状态即可

代码实现 #

页面组件代码

import { useState } from 'react'
import type { GetStaticProps } from 'next'
import prisma from '你的prisma实例路径'

type User = {
  id: string
  name: string
  email: string
}

export default function UserPage({ initialUsers }: { initialUsers: User[] }) {
  // 用服务端初始数据初始化客户端状态
  const [users, setUsers] = useState<User[]>(initialUsers)

  // 等价于Apollo的refetchQueries，专门用于拉取最新用户列表
  const refetchUsers = async () => {
    const res = await fetch('/api/users')
    const latestUsers = await res.json()
    setUsers(latestUsers)
  }

  const handleSubmit = async ({ name, email }) => {
    const body = { name, email }
    await fetch(`/api/users/post`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    })
    // 提交成功后触发重拉取
    await refetchUsers()
  }

  return (
    // 你的页面渲染逻辑：渲染users列表、表单等
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const users = await prisma.user.findMany()
  return {
    props: { initialUsers: users },
    // 可选配置：增量静态再生，保证新用户打开页面时拿到的初始数据是接近实时的，单位秒
    revalidate: 10
  }
}

用户列表接口代码（pages/api/users.ts）

import prisma from '你的prisma实例路径'

export default async function handler(req, res) {
  if (req.method !== 'GET') return res.status(405).end()
  const users = await prisma.user.findMany()
  return res.status(200).json(users)
}

方案2：优化版：无需额外拉取请求 #

如果你的新增用户接口会返回创建成功的用户完整数据，你可以直接更新本地状态，省去一次全量拉取请求，性能更好：

const handleSubmit = async ({ name, email }) => {
  const body = { name, email }
  const res = await fetch(`/api/users/post`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body)
  })
  const newUser = await res.json()
  // 直接把新用户追加到现有列表里，无需调用refetch
  setUsers(prev => [...prev, newUser])
}

方案3：Next.js 13+ App Router专属方案 #

如果你用的是App Router，直接调用router.refresh()即可自动刷新服务端组件的数据，无需手动维护状态和封装接口：

'use client'
import { useRouter } from 'next/navigation'

export default function UserForm() {
  const router = useRouter()

  const handleSubmit = async ({ name, email }) => {
    const body = { name, email }
    await fetch(`/api/users/post`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    })
    // 自动刷新当前页所有服务端组件的数据，等价于全局refetch
    router.refresh()
  }
}

内容的提问来源于stack exchange，提问作者gnarois