使用Supabase & @nuxtjs/supabase查询关联表时profile数据异常

背景 #

使用@nuxtjs/supabase（底层为supabase-js），数据库表结构如下：

• challenges：挑战主表
• profile_challenge：多对多关联表，存储挑战ID与用户档案ID，用于将挑战分配给用户
• challenge_category：多对多关联表，存储挑战ID与分类ID，用于给挑战分配分类
• profiles、categories：仅包含id及文本字段的简单表

执行以下查询时：

.from('challenges').select('*, profiles(id, username), categories(title, image_url)')

出现异常：分类数据返回正确，但4个挑战全部显示同一个profile数据——其中2个挑战实际关联了不同的profile。但单独查询单个挑战（通过ID）或直接查询关联表ID时，都能获取正确的profile数据。

原因 #

Supabase的自动关联查询需要明确指定多对多关联的桥接表。你查询profiles时未指定桥接表profile_challenge，导致Supabase无法正确识别多对多关系，错误使用了默认关联逻辑（比如误判为一对一关联，或读取了错误的外键关联），从而返回重复的profile数据。

而分类查询正常，大概率是因为challenges与categories之间的关联被Supabase正确识别（比如你可能在表中设置了直接外键，或隐式指定了关联路径）。

解决方法 #

在select语句中，通过!桥接表名的语法明确指定多对多关联的桥接表，修正后的查询语句如下：

.from('challenges')
.select('*, profiles!profile_challenge(id, username), categories(title, image_url)')

这个语法会告诉Supabase：通过profile_challenge桥接表来关联challenges和profiles，从而正确获取每个挑战对应的关联用户profile。

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