Next.js+TypeScript项目中，如何用Prisma统计KK列唯一值数量？

针对你的Warga模型，下面提供几种可靠的Prisma查询方式来统计KK列的唯一值数量，以及后续可视化的实现步骤：

一、获取唯一KK数量的Prisma查询方法 #

方法1：直接使用count的distinct参数（最简洁高效） #

Prisma 4.16及以上版本支持在count方法中指定distinct字段，直接返回唯一值的数量：

import { prisma } from '@/lib/prisma'; // 替换为你的Prisma客户端路径

async function getUniqueKKCount() {
  return await prisma.warga.count({
    distinct: ['kk']
  });
}

方法2：通过groupBy统计分组（同时获取每个KK对应的人数） #

如果需要同时知道每个KK下的公民数量（方便后续可视化），可以用groupBy：

async function getKKGroupData() {
  const kkGroups = await prisma.warga.groupBy({
    by: ['kk'],
    _count: { id: true } // 统计每个KK对应的记录数
  });
  // 唯一KK数量就是分组结果的长度
  const uniqueKKCount = kkGroups.length;
  return { uniqueKKCount, kkGroups };
}

方法3：通过findMany+distinct获取唯一值后统计长度 #

如果你的Prisma版本较低不支持count的distinct参数，可用这种方式：

async function getUniqueKKCount() {
  const uniqueKKs = await prisma.warga.findMany({
    distinct: ['kk'],
    select: { kk: true } // 只返回KK字段，减少数据传输
  });
  return uniqueKKs.length;
}

二、在Next.js中集成并可视化 #

1. 在Server Component中获取数据 #

Next.js的Server Component可以直接执行异步查询，避免客户端请求：

import { getUniqueKKCount, getKKGroupData } from '@/lib/data';
import KKChart from '@/components/KKChart';

export default async function WargaStatsPage() {
  const uniqueKKCount = await getUniqueKKCount();
  const { kkGroups } = await getKKGroupData();

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">公民KK统计</h1>
      <p className="mb-6">唯一KK数量：<span className="text-xl font-semibold">{uniqueKKCount}</span></p>
      <KKChart data={kkGroups} />
    </div>
  );
}

2. 实现可视化组件（以Recharts为例） #

先安装依赖：

npm install recharts

创建柱状图组件展示每个KK的人数：

import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

// 定义数据类型
type KKGroup = {
  kk: string;
  _count: { id: number };
};

interface KKChartProps {
  data: KKGroup[];
}

export default function KKChart({ data }: KKChartProps) {
  // 转换为图表需要的数据格式
  const chartData = data.map(item => ({
    kk: item.kk,
    人数: item._count.id
  }));

  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart data={chartData}>
        <XAxis dataKey="kk" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="人数" fill="#2563eb" />
      </BarChart>
    </ResponsiveContainer>
  );
}

常见问题排查 #

如果之前用groupBy或distinct失败，可能是以下原因：

• 使用了低于4.16的Prisma版本，不支持count({ distinct: [...] })；
• groupBy时未指定by字段，或者统计字段写法错误；
• 拼写错误：比如把kk写成了其他字段名。

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