Enhanced Type Inference for JSON Fields in supabase-js

Jan 20, 2025

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:


_34
type CustomJsonType = {
_34
foo: string;
_34
bar: { baz: number };
_34
en: 'ONE' | 'TWO' | 'THREE';
_34
};
_34
_34
export type Database = MergeDeep<
_34
DatabaseGenerated,
_34
{
_34
your_schema: {
_34
Tables: {
_34
your_table: {
_34
Row: {
_34
data: CustomJsonType | null;
_34
};
_34
// Optional: Use if you want type-checking for inserts and update
_34
// Insert: {
_34
// data?: CustomJsonType | null;
_34
// };
_34
// Update: {
_34
// data?: CustomJsonType | null;
_34
// };
_34
}
_34
}
_34
Views: {
_34
your_view: {
_34
Row: {
_34
data: CustomJsonType | null;
_34
};
_34
}
_34
}
_34
}
_34
}
_34
>

What You Get#

Now, when you query your data:


_15
const res = await client
_15
.from('your_table')
_15
.select('data->bar->baz, data->en, data->bar');
_15
_15
if (res.data) {
_15
console.log(res.data);
_15
// TypeScript infers the shape of your JSON data:
_15
// [
_15
// {
_15
// baz: number;
_15
// en: 'ONE' | 'TWO' | 'THREE';
_15
// bar: { baz: number };
_15
// }
_15
// ]
_15
}

Get Started#

Start using this feature with our guides:

Build in a weekend, scale to millions