SvelteKit中Supabase JOIN查询浏览器正常终端profiles为null

这是SvelteKit服务端渲染（SSR）阶段与浏览器端Supabase客户端权限不一致导致的：

• 浏览器控制台能看到完整的profiles关联数据，是因为浏览器端运行的Supabase客户端携带了当前登录用户的认证凭证，有权限读取关联的profiles表内容
• 终端打印的日志对应SSR阶段执行load函数的场景：你当前导入的../supabase是浏览器端客户端实例，在服务端运行时无法自动读取用户请求携带的认证Cookie，Supabase会将该请求判定为未授权请求，触发profiles表的行级安全（RLS）拦截规则，关联查询结果直接返回null
• 给writable store赋值时报错，是因为服务端执行完成后返回的页面数据里profiles已经是null，传到客户端初始化store时直接读取null的属性就会抛出异常

• 方案1：适配服务端Supabase认证逻辑
  不要在服务端执行的load函数里直接使用浏览器端Supabase实例，换成适配SvelteKit的服务端Supabase客户端，在初始化时从当前请求的Cookie中解析用户认证会话，保证服务端查询时和浏览器端持有相同的权限。
• 方案2：关闭当前页面的SSR
  如果不需要服务端渲染这个页面的内容，直接在当前页面的script标签顶部添加export const ssr = false，强制load函数在浏览器端执行，和你手动调试的运行环境保持一致，就能拿到完整的关联数据。
• 方案3：添加空值兜底
  不管用哪种方案，都建议在查询完成后给关联字段加空值兜底，避免权限问题或者数据异常导致的页面崩溃：

// 按slug查询是单条记录，加.single()直接返回对象而非数组
const { data, error } = await supabase
  .from('babies')
  .select(
    'babyName, babyMiddle, babyLast, birthday, gender, lbs, message, oz, weight,  profiles ( first_name, partners_name )'
  )
  .eq('slug', slug)
  .single();

const safeData = data ? {
  ...data,
  profiles: data.profiles ?? {
    first_name: '',
    partners_name: ''
  }
} : null;

• 额外检查：确认profiles表的RLS策略配置正确，允许通过babies表做关联查询时读取对应关联的first_name、partners_name字段，避免策略拦截导致关联字段返回null。

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