如何使用 PostgREST 中的 PostgrestFilterBuilder，而不会遇到 PostgrestQueryBuilder 中预期缺少属性的类型错误

Question

首先，我正在开发一个基于 Typescript React 的项目，该项目使用 SUPABASE 作为后端。

首先这是我的代码：

第一个代码图像

第二张代码图

我正在制作一个可重复使用的组件，用于根据 id 创建或编辑小屋，如果 id 为 true，则进行编辑，否则创建。

这是我写的代码

 //create and edit the cabin

  let query = supabase.from('cabins') 

  //create
  if(!id) query = query.insert([{...data,image:imageUrl}]);

  //edit 
  if(id) query = query
  .update({...data, image:imageUrl })
  .eq('id', id)
  
  
  const {data:newCabin,error} = await query.select().single()

  if(error) {console.log(error)
    throw new Error("An error occurerd creating a cabin.") 
}

我得到的错误

代码错误。

以下是该函数在代码中的使用方式 代码实现的第一张图片 代码实现第二张图

注意，我从浏览器获得了所需的输出，数据甚至在我的后端得到更新，我的代码没有损坏，但打字稿仍在向我抱怨。请问解决这个问题的最佳方法是什么

这些是我采取的方法

第一种方法 我在终端上运行了“@supabase/postgrest-js”命令。

第二种方法

    ...

    let query: PostgrestQueryBuilder<newCabinType>;

    if (!id) {
      query = supabase.from('cabins').insert([{ ...data, image: imageUrl }]);
    } else {
      query = supabase.from('cabins').update({ ...data, image: imageUrl }).eq('id', id);
    }

    const { data: newCabin, error }: PostgrestSingleResponse<newCabinType> = await query.single();

    if (error) {
      throw new Error("An error occurred creating/editing a cabin.");
    }

    ...

第三种方法 我已在声明的查询变量上显式定义了类型，但该方法出现了更多错误

• let query: PostgrestQueryBuilder<newCabinType, any, "cabins", any>;

•  let query: PostgrestQueryBuilder<newCabinType, unknown>;

我希望这些解决方案能够发挥作用，但没有任何效果

Answer 1

几个月后我终于找到了解决方案，这就是我解决整个问题的方法。

首先，我去掉了单独的let查询赋值，直接执行插入或更新操作，将结果存储在query中，后来修改为查询结果queryResult。

通过避免重新分配查询，我阻止了 TypeScript 需要处理 PostgrestQueryBuilder 和 PostgrestFilterBuilder 之间的类型差异。

更新代码：

  let queryResult;

  if(!id) {
    //CREATE
    queryResult = await supabase.from('cabins').insert([{...data,image:imageUrl}])
  }else{
    //EDIT
    queryResult = await supabase.from('cabins').update({...data, image:imageUrl}).eq('id',id).select().single();
  }

  const {data:newCabin, error} = queryResult;