Logo

dev-resources.site

for different kinds of informations.

Typesafe Supabase Flutter Queries

Published at
6/24/2024
Categories
flutter
supabase
schema
mobile
Author
mmvergara
Categories
4 categories in total
flutter
open
supabase
open
schema
open
mobile
open
Author
9 person written this
mmvergara
open
Typesafe Supabase Flutter Queries

Supabase Flutter Types? In web development, supabase provide you with an API to generate typescript types to make typesafe queries. But what about for flutter? for dart? That's what this is all about

Yes we can generate dart classes directly from you supabase schema in order to achieve Typesafe Queries Flutter Supabase

Supabase Schema Dart Class Generator using this tool you can generate dart class via WebApp or CLI

1. Assuming the following table schema



create table
  public.books (
    id bigint generated by default as identity,
    name character varying not null,
    description text null,
    price integer not null,
    created_at timestamp with time zone not null default now(),
    constraint books_pkey primary key (id)
  ) tablespace pg_default;


Enter fullscreen mode Exit fullscreen mode

2. Use the CLI or the Web App to generate dart classes



class Books {
  final BigInt id;
  final String name;
  final String? description;
  final int price;
  final DateTime created_at;

  const Books({
    required this.id,
    required this.name,
    this.description,
    required this.price,
    required this.created_at,
  });

  static String get table_name => 'books';
  static String get c_id => 'id';
  static String get c_name => 'name';
  static String get c_description => 'description';
  static String get c_price => 'price';
  static String get c_created_at => 'created_at';
  static Map<String, dynamic> insert({
    BigInt? id,
    required String name,
    String? description,
    required int price,
    DateTime? created_at,
  }) {
    return {
      if (id != null) 'id': id.toString(),
      'name': name.toString(),
      if (description != null) 'description': description.toString(),
      'price': price.toString(),
      if (created_at != null) 'created_at': created_at.toUtc().toString(),
    };
  }

  static Map<String, dynamic> update({
    BigInt? id,
    String? name,
    String? description,
    int? price,
    DateTime? created_at,
  }) {
    return {
      if (id != null) 'id': id.toString(),
      if (name != null) 'name': name.toString(),
      if (description != null) 'description': description.toString(),
      if (price != null) 'price': price.toString(),
      if (created_at != null) 'created_at': created_at.toUtc().toString(),
    };
  }

  factory Books.fromJson(Map<String, dynamic> json) {
    return Books(
      id: BigInt.parse(json['id'].toString()),
      name: json['name'] as String,
      description:
          json['description'] != null ? json['description'] as String : null,
      price: json['price'] as int,
      created_at: DateTime.parse(json['created_at'].toString()),
    );
  }
}


Enter fullscreen mode Exit fullscreen mode

3. Using the generated class

we now have a typesafe'ish to interact with the database.

Getting Table Name



  Books.table_name // "books"


Enter fullscreen mode Exit fullscreen mode

Fetch Data



// fetchedBooks is a typeof List<Books>
final books = await supabase
      .books
      .select("*")
      .withConverter((data) => data.map(Books.fromJson).toList());


Enter fullscreen mode Exit fullscreen mode

Insert Data

yes, we know which ones is required and which ones are optional



final data = Books.insert(
  name: 'Learn Flutter',
  description: 'Endless brackets and braces',
  price: 2,
);
await supabase.books.insert(data);


Enter fullscreen mode Exit fullscreen mode

Inset Many Data



final many_data = [
  Books.insert(
    name: 'Learn Minecraft',
    description: 'Endless blocks and bricks',
    price: 2,
  ),
  Books.insert(
    name: 'Description is optional',
    created_at: DateTime.now(),
    price: 2,
  ),
];
await supabase.books.insert(many_data);


Enter fullscreen mode Exit fullscreen mode

Update Data



final newData = Books.update(
  name: 'New Book Name',
);
await supabase.books.update(newData).eq(Books.c_id, 1);


Enter fullscreen mode Exit fullscreen mode

Delete Data



await supabase.books.delete().eq(Books.c_id, 1);


Enter fullscreen mode Exit fullscreen mode

How it works is that it uses the rest api to fetch for your schemas and then constructs the dart classes for you. Is it safe? yes first of all the project is open source and they api is used by other tools like this one that visualizes your database.

Is this only for flutter? no you can use it in a normal Dart Project.

Im trying to make it better for the community i would really appreciate some help and suggestions to improve it. especially the process of parsing the data to dart types, but either way the generated classes are tested for runtime for most supabase / postgres types

GitHub logo mmvergara / supadart

Typesafe queries in Supabase Flutter! Generate Flutter / Dart 🎯 classes from your Supabase schema.

Pub Version Pub Points GitHub Stars Runtime Test GitHub License

Supadart 🎯

Typesafe Supabase Flutter Queries
Generate Flutter / Dart 🎯 classes from your Supabase schema.

// allBooks is a typeof List<Books>
final allBooks = await supabase
      .books
      .select("*")
      .withConverter(Books.converter);
Enter fullscreen mode Exit fullscreen mode

Table of Contents πŸ“š

Features πŸš€

  • 🌐 Cli and Web App
  • πŸ› οΈ Typesafe Queries (Create, Read, Equality)
  • 🧱 Immutable Generated Classes
  • πŸ—‚οΈ Roundtrip Serialization fromJson to toJson and back
  • πŸ“Š Supports Column Selection Queries
  • πŸ”’ Supports all Supabase Major datatypes
  • πŸ—‚οΈ Supports Defined as array types
  • πŸ—‚οΈ Supports Enums

Conversion Table πŸ“Š

Supabase Identifier PostgreSQL Format JSON Type Dart Type Runtime Tested
# int2 smallint integer int type βœ… type[]βœ…
# int4 integer integer int type
…
schema Article's
30 articles in total
Favicon
Schema Markup can boost your click-through rates by up to 30%?
Favicon
Custom schema specific Supabase Server Component clients in Grida Form workspace
Favicon
Zod for TypeScript Schema Validation: A Comprehensive Guide
Favicon
Database schema design of Splitwise application
Favicon
Validating JSON Schema with Fixed and User-Defined Keys in Python
Favicon
Using Zod's z.union: An Important Pitfall to Avoid
Favicon
Desvendando o Atlas: Gerencie Seus Esquemas de Banco de Dados com EstiloπŸš€
Favicon
Customize Schema with @extend_schema_view
Favicon
Hotel reservation Schema design (PostgreSQL)
Favicon
How to Insert Data into Specific Table of PostgreSQL Schemas with Node.js
Favicon
Typesafe Supabase Flutter Queries
Favicon
Using yup to build schema with value parsing and validation.
Favicon
Designing an Optimal Database Schema for a Followers-Following System in a Blog-Post App
Favicon
JobPosting from Schema.org
Favicon
Unlocking the Power of Mongoose Schemas: Enhancements for Better Data Handling
Favicon
Unraveling the Power of Schema Markup: Elevating Your Website's Visibility and Performance
Favicon
How to handle complex json schema
Favicon
Navigating Django Schemas with Ease: How Django-schema-viewer Helps Developers
Favicon
🐣Your First Database Schema Change in 5 Minutes with Bytebase
Favicon
Multiplos schemas no mesmo tΓ³pico Kafka na linha de comando
Favicon
How pgroll works under the hood
Favicon
Automating API Documentation: A Journey from TypeScript to OpenAPI and Schema Governence with Optic
Favicon
Master schema validation in TypeScript with Zod
Favicon
πŸš› Deploy Database Schema Migrations with Bytebase
Favicon
Random Data Generator Website
Favicon
Xata's JSON Column Type
Favicon
Introducing pgroll: Zero-downtime, Reversible, Schema Migrations for Postgres
Favicon
Designing Your Database Schema
Favicon
WHAT ARE THE TYPES OF SCHEMA MARKEUP?
Favicon
Iceberg Schema Evolution in Trino

Featured ones: