Enhanced Type Inference for JSON Fields in supabase-js

[avallete]

TypeScript users, here's a cool new feature! Starting from v2.48.0, defining custom types for JSON fields in supabase-js and using them with the JSON selector is now easier, making your code more type-safe and intuitive.

Quick Example

Define your custom JSON type:

type CustomJsonType = {
  foo: string;
  bar: { baz: number };
  en: 'ONE' | 'TWO' | 'THREE';
};

export type Database = MergeDeep<
  DatabaseGenerated,
  {
    your_table: {
      Row: {
        data: CustomJsonType | null;
      };
      // Optional: Use if you want type-checking for inserts and update
      // Insert: {
      //  data?: CustomJsonType | null;
      // };
      // Update: {
      //  data?: CustomJsonType | null;
      // };
    };
  }
>;

What You Get

Now, when you query your data:

const res = await client
  .from('your_table')
  .select('data->bar->baz, data->en, data->bar');

if (res.data) {
  console.log(res.data);
  // TypeScript infers the shape of your JSON data:
  // [
  //   {
  //     baz: number;
  //     en: 'ONE' | 'TWO' | 'THREE';
  //     bar: { baz: number };
  //   }
  // ]
}

Get Started

Start using this feature with our guides:

• Generating Types
• Typescript Support
• Helper Types for Tables and Joins