ReactJS中通过Supabase实现多对一表连接及查询报错解决

问题分析 #

你的SQL查询能正常返回结果，但在Supabase JS客户端中实现时出错，核心原因是select语句的字段格式不符合Supabase关联查询的语法规范，同时存在链式调用的细节问题。

修正后的代码 #

const SelectProduct = async (orderBy, brand, type) => {
  let query = supabase
    .from('product')
    // 匹配你的SQL需求：product所有字段 + category的category_product字段 + type所有字段
    .select('*, category(category_product), type(*)', { count: 'exact' })
    .innerJoin('category', 'product.category_id', 'category.id')
    .innerJoin('type', 'product.type_product', 'type.id');

  if (brand && brand.length > 0) {
    query = query.in('product_brand', brand);
  }
  if (type && type.length > 0) {
    query = query.in('type_product', type);
  }
  if (orderBy && orderBy === "1") {
    // 必须重新赋值给query，否则排序条件不会生效
    query = query.order('price', { ascending: false });
  }
  if (orderBy && orderBy === "-1") {
    query = query.order('price');
  }
  if (orderBy && orderBy === "2") {
    Swal.fire({
      icon: 'info',
      title: 'Coming Soon..',
      html: '<p class="text-xl">This Feature will be available in the next version of our application.</p>',
    });
  }

  const { data, error, count } = await query;
  if (error) {
    Swal.fire({
      icon: "error",
      title: "Oops...",
      text: `${error}`
    })
    throw new Error(error.message);
  }
  console.log("Data : ", data);
  return { data, error, count };
}

关键修正点 #

• select字段格式调整：Supabase关联查询要求明确指定关联表的字段，格式为表名(字段名)或表名(*)。对应你的SQL，若仅需category表的category_product字段，就写category(category_product)；若需要category全量字段，则改为category(*)。
• 链式调用赋值修复：原代码中query.order(...)未重新赋值给query，导致排序条件无法应用到最终查询，需改为query = query.order(...)。
• 冗余语法清理：移除innerJoin后的多余分号，避免语法异常。

补充说明 #

如果你的原SQL中category_product是product表的字段，那么select语句可简化为select('*, category(*), type(*)', { count: 'exact' })，这样会返回product、category、type三张表的所有字段，和你测试的SQL结果完全一致。

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