supabase-js

81 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Send message to queue in JavaScript

Example of enqueueing a message using the Supabase JavaScript client: ```tsx const sendToQueue = async () => { const result = await supabase.schema('pgmq_public').rpc('send', { queue_name: 'foo', message: { hello: 'world' }, sleep_seconds: 30, }) console.log(result) } ``` This sends a JSON message to the queue named 'foo' with a 30-second sleep delay before the message becomes available for processing.

Send message to queue in Dart

Example of enqueueing a message using the Supabase Dart client: ```dart Future<void> sendToQueue() async { final result = await supabase.schema('pgmq_public').rpc('send', params: { 'queue_name': 'foo', 'message': {'hello': 'world'}, 'sleep_seconds': 30, }); print(result); } ``` This sends a JSON message to the queue named 'foo' with a 30-second sleep delay.

Pop message from queue in Swift

Example of dequeueing a message using the Supabase Swift client: ```swift func popFromQueue() async throws { let result = try await supabase .schema("pgmq_public") .rpc("pop", params: ["queue_name": "foo"]) .execute() print(result) } ``` This retrieves and removes a message from the queue named 'foo'.

Pop message from queue in Dart

Example of dequeueing a message using the Supabase Dart client: ```dart Future<void> popFromQueue() async { final result = await supabase.schema('pgmq_public').rpc('pop', params: { 'queue_name': 'foo', }); print(result); } ``` This retrieves and removes a message from the queue named 'foo'.

Send message to queue in Swift

Example of enqueueing a message using the Supabase Swift client: ```swift func sendToQueue() async throws { let result = try await supabase .schema("pgmq_public") .rpc("send", params: [ "queue_name": AnyJSON.string("foo"), "message": AnyJSON.object(["hello": "world"]), "sleep_seconds": AnyJSON.integer(30) ]) .execute() print(result) } ``` This sends a JSON message to the queue named 'foo' with a 30-second sleep delay.

Override response types for individual queries

Use overrideTypes<T>() to override the return type of a query. For partial override use overrideTypes<Array<{ id: string }>>(), for full replacement use overrideTypes<Array<{ id: string }>, { merge: false }>(). Works with single(), maybeSingle(), and regular select().

Type shorthands for Tables and Enums

Generated types provide shorthands for accessing tables and enums. Instead of Database['public']['Tables']['movies']['Row'], use Tables<'movies'> and Enums for accessing enums.

Update types automatically with GitHub Actions

Set up a GitHub Action to keep type definitions in sync with the database. Add a script to package.json: "update-types": "npx supabase gen types --lang=typescript --project-id \"$PROJECT_REF\" > database.types.ts". Create .github/workflows/update-types.yml to run on schedule (default daily at midnight UTC), requiring SUPABASE_ACCESS_TOKEN and PROJECT_REF environment variables.

Get response types for complex queries with QueryData

Use QueryResult, QueryData, and QueryError from '@supabase/supabase-js' to get result types from any query, including nested types for database joins. QueryData<typeof query> extracts the data type from a query.

Generating TypeScript types from Supabase project dashboard

TypeScript types can be generated and downloaded directly from the Supabase project dashboard at the API page. This uses database introspection to generate type-safe API definitions.

Login to Supabase CLI with Personal Access Token

Before generating types with the Supabase CLI, log in using: npx supabase login (requires a Personal Access Token)

Initialize Supabase project before generating types

Run npx supabase init to initialize your Supabase project before generating types.

Generate types for remote Supabase project

Generate TypeScript types for a remote Supabase project using: npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > database.types.ts

Generate types for local Supabase development

Generate TypeScript types for local development using: npx supabase gen types typescript --local > database.types.ts

Generate types for self-hosted Supabase instance

Generate TypeScript types for a self-hosted Supabase instance using: npx supabase gen types typescript --db-url postgres://postgres.[POOLER_TENANT_ID]:[PO••••••D]@[your-domain-or-ip]:5432/postgres --schema public > database.types.ts

Generated type structure for database tables

Generated types include Row (data from .select()), Insert (data passed to .insert()), and Update (data passed to .update()). Generated columns must not be supplied on insert. Non-null columns with no default must be supplied on insert. Nullable columns can be omitted on insert. Non-null columns are optional on update.

Using generated types with supabase-js client

Supply generated type definitions to supabase-js by importing the Database type and passing it to createClient: const supabase = createClient<Database>(process.env.SUPABASE_URL, process.env.SUPABASE_PUBLISHABLE_KEY)

Override generated types using MergeDeep from type-fest

Use MergeDeep from the type-fest library to override generated types when they don't match expectations. For example, a view's column may show as nullable when it should be not null. Requires setting compilerOptions.strictNullChecks to true in tsconfig.json.

Define custom JSON types for JSON fields

Starting from supabase-js v2.48.0, you can define custom types for JSON fields using MergeDeep to get enhanced type inference when using JSON selectors with -> and ->> operators.

Type-safe JSON querying with -> and ->> operators

Once custom JSON types are defined, TypeScript automatically infers correct types when using JSON selectors. The -> operator returns JSON, and the ->> operator returns text. Supports single-level access (data->foo), nested access (data->bar->baz), and text extraction (data->>foo).

React dev server startup with Vite

Run `npm run dev` to start the Vite development server. The application will be available at http://localhost:5173 by default.

Give your agent this brain