Typescript error on CRUD API functions with Supabase. How to infer from Supabase database types? (Tables | Row)

[eybel]

Hello I have been struggling with my API query functions where I created my CRUD operations and typed them using different options.

I have 4 entities (services, products, pets and objects) I wanted to re-use my CRUD so I infer types (data returned types and paylods) from "database.types.ts" but I can't make it work. It always complains about either my "payload" or my "return data" type.

import { supabase } from "@/lib/supabaseClient";
import { Database } from "@/types/database.types";

type TableSchema<T extends keyof Database["public"]["Tables"]> = Database["public"]["Tables"][T];
type Row<T extends keyof Database["public"]["Tables"]> = TableSchema<T>["Row"];
type Insert<T extends keyof Database["public"]["Tables"]> = TableSchema<T>["Insert"];
type Update<T extends keyof Database["public"]["Tables"]> = TableSchema<T>["Update"];

export const crudFactory = <
  T extends keyof Database["public"]["Tables"]
>(
  tableName: T
) => ({
  fetchOne: async (id: number): Promise<Row<T>> => {
    const { data, error } = await supabase
      .from(tableName)
      .select("*")
      .eq("id", id)
      .single();

    if (error) throw new Error(error.message);

    return data as Row<T>;
  },

  fetchAll: async (): Promise<Row<T>[]> => {
    const { data, error } = await supabase.from(tableName).select("*");

    if (error) throw new Error(error.message);

    return data as Row<T>[];
  },

  create: async (payload: Insert<T>): Promise<Row<T>> => {
    const { data, error } = await supabase
      .from(tableName)
      .insert(payload)
      .select()
      .single();

    if (error || !data) throw new Error(error?.message || "Failed to create");

    return data as Row<T>;
  },

  update: async (id: number, payload: Update<T>): Promise<Row<T>> => {
    const { data, error } = await supabase
      .from(tableName)
      .update(payload)
      .eq("id", id)
      .select()
      .single();

    if (error || !data) throw new Error(error?.message || "Failed to update");

    return data as Row<T>;
  },

  delete: async (id: number): Promise<boolean> => {
    const { error } = await supabase.from(tableName).delete().eq("id", id);

    if (error) throw new Error(error.message);

    return true;
  },
});

ERROR:

Conversion of type '{ article: { Row: { approved: boolean; area: string | null; category: string; condition: string | null; created_at: string; deleted_at: string | null; description: string | null; event_at: string | null; ... 6 more ...; title: string; }; Insert: { ...; }; Update: { ...; }; Relationships: []; }; ... 7 more ...; servi...' to type 'Row<T>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

Whats the best way to infer types for these CRUD? I tried lots of combination, it complains every single time.

The only way was to cast the data frist as unknown first then the right type, but that is not recommended since it defeats the purpose of using typescript.

I would appreaciate any help. Thank you!