如何通过外键获取关联表数据：获取Provider对应的Service类型

问题背景 #

现有Prisma数据模型中，Provider与Service为关联关系，当前后端接口仅返回Provider的serviceId，无法直接获取对应Service的type字段，需修改后端查询逻辑并调整前端渲染代码。

现有数据模型 #

model Provider {
  id          String    @id @default(cuid())
  name        String
  email       String
  password    String
  phone       String      
  photo       String?
  service     Service?  @relation(fields: [serviceId], references: [id])
  serviceId   String?
  location    Location? @relation(fields: [locationId], references: [id])
  locationId  String?
  createdAt   DateTime  @default(now())
  text        String
  starAverage Float
  medals      Medals[]
  comment     Comment[]
}

model Service {
  id       String     @id @default(cuid())
  type     String
  provider Provider[]
}

解决方案 #

1. 修改后端Express路由代码 #

在Prisma的findMany方法中使用include选项关联查询Service表数据，同时修正原代码中的笔误（prisma.client应为prisma.provider）：

router.get('/list', async (req: Request, res: Response) => {
  // 关联查询Service表，获取对应的type字段
  const allProviders = await prisma.provider.findMany({
    include: {
      service: true // 包含关联的Service数据
    }
  })
  res.json({ allProviders })
})

2. 调整前端Next.js渲染代码 #

后端返回的数据会包含service对象，直接渲染service.type即可，替换原有的serviceId：

const [providers, setProviders] = useState([] as any[])

useEffect(() => {
  axios.get('http://localhost:5140/providers/list')
  .then(res => {
    setProviders(res.data.allProviders) // 取返回结果中的allProviders数组
  }).catch(err => {
    console.log(err)
  })
}, [])

const renderedProviders = providers.map(provider => {
  return (
    <div
      className="card"
      style={{ width: "18rem"}}
      key={provider.id}
    >
      <img className="card-img-top" src={provider.photo || "..."}/>
      <div className="card-body">
        <h3>{provider.name}</h3>
        <p>{provider.starAverage} estrekas</p>
        {/* 渲染Service的type字段，处理service为null的情况 */}
        <p>{provider.service?.type || '无服务类型'}</p>
      </div>
    </div>
  );
});

return (
  <div className="d-flex flex-row flex-wrap justify-content-between">
    {renderedProviders}
  </div>
)

关键说明 #

• 后端通过include: { service: true }实现关联查询，Prisma会自动匹配Provider对应的Service记录并返回完整对象。
• 前端使用可选链provider.service?.type避免service为null时触发报错，同时设置默认值兜底。

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