Idempotent methods and POST retried in PostgREST
Only idempotent HTTP methods (GET, HEAD, OPTIONS) and POST requests (used by PostgREST) are retried. Other HTTP methods are not retried.
supabase-js
81 notes in this subject, read out of this brain and free to use. This is page 1 of 2.
Warning about high retry counts exhausting connection pool
Enabling retries with a high number of attempts has the potential to exhaust the Data API connection pool, which could result in lower throughput and failed requests. Only enable retries for network errors such as 520 status from Cloudflare.
Custom retry function with retryOn
Use a custom function with retryOn to inspect the URL or response and decide whether to retry: const fetchWithRetry = fetchRetry(fetch, { retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000), retryOn: (attempt, error, response) => { const shouldRetry = (attempt: number, error: Error | null, response: Response | null) => attempt < 3 && response && response.status == 520 && response.url.includes('rpc/your_database_function') if (shouldRetry(attempt, error, response)) { console.log(`Retrying request... Attempt #${attempt}`, response) return true } return false } })
Example fetch-retry with exponential backoff
Configure fetch-retry with exponential backoff and specific error codes: const fetchWithRetry = fetchRetry(fetch, { retries: 3, retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000), retryOn: [520], })
fetch-retry configuration options
The fetch-retry package supports the following configuration options: retries (number of retry attempts), retryDelay (function that returns delay in milliseconds based on attempt number), and retryOn (array of status codes or custom function to determine which errors should trigger a retry).
Wrap fetch with fetch-retry in supabase-js client
To use fetch-retry with supabase-js, wrap the native fetch function and pass it to the client: import { createClient } from '@supabase/supabase-js' import fetchRetry from 'fetch-retry' const fetchWithRetry = fetchRetry(fetch) const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...', { global: { fetch: fetchWithRetry, }, })
Install fetch-retry with supabase-js
Install both packages with: npm install @supabase/supabase-js fetch-retry
Use fetch-retry for non-PostgREST retries
To add retries to non-PostgREST requests (auth, storage, functions), use the fetch-retry package. This wraps the native fetch function and applies to all requests made by the supabase-js client.
Disable built-in PostgREST retries
To disable automatic retries in supabase-js, pass retry: false in the db configuration when creating the client: const supabase = createClient('https://your-project-id.supabase.co', 'your-publishable-key', { db: { retry: false, }, })
Built-in PostgREST retries enabled by default
Starting with supabase-js v2.102.0, PostgREST queries (.from(), .rpc()) include built-in automatic retries for transient errors. Retries are enabled by default and use exponential backoff with jitter.
Retryable HTTP status codes in PostgREST
PostgREST retries are triggered for HTTP status codes 408 (Request Timeout), 409 (Conflict), 503 (Service Unavailable), and 504 (Gateway Timeout), as well as network failures.
Select all columns in JavaScript API
To select all columns from a table, use `.select()` without parameters or `.select('*')`.
Select with WHERE BETWEEN and NOT EQUAL in JavaScript
To select columns from a table with WHERE BETWEEN and NOT EQUAL clauses, use the `.gte()`, `.lte()`, and `.not()` methods. For example, to select first_name, last_name, team_id, age from players where age is between 20 and 24 and team_id is not 'STL', use `.select('first_name,last_name,team_id,age').gte('age', 20).lte('age', 24).not('team_id', 'eq', 'STL')`.
Multiple ORDER BY with different directions in JavaScript
To apply multiple ORDER BY clauses with different sort directions, call `.order()` multiple times with the ascending option. For example, `.order('last_name', { ascending: true }).order('first_name', { ascending: false })` orders by last_name ascending, then first_name descending.
Complex boolean logic AND OR AND in JavaScript filters
To convert SQL with AND OR AND logic like `((team_id = 'CHN' and age > 35) or (team_id != 'CHN' and age is not null))`, use the `.or()` method with nested `and()` syntax: `.or('and(team_id.eq.CHN,age.gt.35),and(team_id.neq.CHN,age.is.null)')`. Use `.not.` prefix for NOT operators and `neq` for not equal.
JavaScript client initialization with custom schema
Initialize the JavaScript client with a custom schema by passing db: { schema: 'myschema' } in the options object: const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, { db: { schema: 'myschema' } }). Alternatively, change the schema on a per-query basis using: supabase.schema('myschema').from('todos').select('*')
Official client libraries
Supabase provides official client libraries for JavaScript, Flutter, and Swift. Unofficial libraries are supported by the community.
Python client library status
Python client library is in beta status.
Install Supabase client library for Expo React Native
Install the @supabase/supabase-js client library along with required dependencies using: cd my-app && npx expo install @supabase/supabase-js react-native-url-polyfill expo-sqlite
Expo environment variables must be prefixed with EXPO_PUBLIC_
Expo requires environment variables to be prefixed with EXPO_PUBLIC_ to be accessible in app code. Set EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY in the .env file.
Create Supabase client helper in Astro
Create src/lib/supabase.ts with a createServerClient function that imports createClient from @supabase/supabase-js and initializes it with PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_PUBLISHABLE_KEY from import.meta.env.
Supabase client initialization with publishable key
import { createClient } from '@supabase/supabase-js' const supabase = createClient( 'https://your-project.supabase.co', 'sb_publishable_...' // was the anon key )
Supabase admin client initialization with secret key
import { createClient } from '@supabase/supabase-js' const supabaseAdmin = createClient( 'https://your-project.supabase.co', 'sb_secret_...' // was the service_role key )
Hono project includes Supabase dependencies
The package.json file in the bootstrapped Hono project includes @supabase/supabase-js and @supabase/ssr for server-side authentication. Install all dependencies with npm install.
Install supabase-swift via Swift Package Manager
Add the supabase-swift package to your Xcode app by navigating to File > Add Package Dependencies and entering the repository URL https://github.com/supabase/supabase-swift in the search bar. Make sure to add the Supabase product package as a dependency to your application target.
Initialize Supabase client in iOS SwiftUI
Create a new Supabase.swift file and initialize the SupabaseClient with your project URL and publishable key. The code is: import Supabase let supabase = SupabaseClient( supabaseURL: URL(string: "YOUR_SUPABASE_URL")!, supabaseKey: "YOUR_SUPABASE_PUBLISHABLE_KEY" )
Initialize Supabase client in Flutter
To initialize the Supabase client in a Flutter app, call Supabase.initialize() in the main() function before runApp(), passing the url and publishableKey parameters. The url and publishableKey are obtained from the Connect panel in the Supabase dashboard.
supabase_flutter package version
The supabase_flutter client library version is ^2.0.0 and is specified in pubspec.yaml dependencies.
Flutter Supabase client initialization code example
import 'package:supabase_flutter/supabase_flutter.dart'; Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await Supabase.initialize( url: 'YOUR_SUPABASE_URL', publishableKey: 'YOUR_SUPABASE_PUBLISHABLE_KEY', ); runApp(MyApp()); }
Install Supabase Kotlin client with Gradle
To install the Supabase Kotlin client in an Android project, open the build.gradle.kts (app) file and add the serialization plugin, Ktor client, and Supabase client. Add the kotlin serialization plugin: kotlin("plugin.serialization") version "$kotlin_version". In dependencies, add: implementation(platform("io.github.jan-tennert.supabase:bom:$supabase_version")) for the BOM, implementation("io.github.jan-tennert.supabase:postgrest-kt") for Postgrest, and implementation("io.ktor:ktor-client-android:$ktor_version") for the Ktor client. Replace version placeholders with the latest versions.
Initialize Supabase client in Kotlin Android app
Create a Supabase client in your Kotlin Android app by calling createSupabaseClient with your supabaseUrl and supabaseKey (publishable key). Install the Postgrest module. Example: val supabase = createSupabaseClient(supabaseUrl = "https://xyzcompany.supabase.co", supabaseKey = "your_publishable_key") { install(Postgrest) }. Place this below the imports in MainActivity.kt. The supabaseUrl and supabaseKey can be obtained from the project Connect panel.
Query data from Supabase in Kotlin Compose
Use LaunchedEffect with Dispatchers.IO to fetch data from the database. Call supabase.from("table_name").select().decodeList<DataClass>() to retrieve and deserialize data. Example: instruments = supabase.from("instruments").select().decodeList<Instrument>(). Update state with the results and display in UI using LazyColumn or other Composables.
Query Supabase data from Next.js server component
Example of querying all rows from a table in a Next.js server component: import { createClient } from "@/lib/supabase/server"; import { Suspense } from "react"; async function InstrumentsData() { const supabase = await createClient(); const { data: instruments } = await supabase.from("instruments").select(); return <pre>{JSON.stringify(instruments, null, 2)}</pre>; } export default function Instruments() { return ( <Suspense fallback={<div>Loading instruments...</div>}> <InstrumentsData /> </Suspense> ); }
Configure Supabase in nuxt.config.ts
In nuxt.config.ts, export a defineNuxtConfig object with runtimeConfig.public containing supabaseUrl and supabasePublishableKey properties that read from process.env.SUPABASE_URL and process.env.SUPABASE_PUBLISHABLE_KEY respectively.
Install Supabase client library in Nuxt
Install the @supabase/supabase-js client library in a Nuxt app by running `npm install @supabase/supabase-js`. This provides a convenient interface for working with Supabase from Nuxt.
Supabase environment variables for Nuxt
Create a .env file with SUPABASE_URL and SUPABASE_PUBLISHABLE_KEY variables that can be obtained from the project Connect panel.
Query Supabase data in Nuxt app.vue
Example of querying data in app.vue: import createClient from @supabase/supabase-js, use useRuntimeConfig() to get config values, create a supabase client with createClient(config.public.supabaseUrl, config.public.supabasePublishableKey), define a ref for data, create an async function to query using supabase.from('table_name').select(), and call it in onMounted() lifecycle hook. Render results with v-for in template.
React quickstart: Create Vite app
Create a React app using Vite with the command: npm create vite@latest my-app -- --template react
React quickstart: Install supabase-js client library
Install the Supabase client library in your React project with: npm install @supabase/supabase-js
React quickstart: Environment variables for Supabase
Create a .env.local file with VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY. These values can be obtained from the project Connect panel in the Supabase dashboard.
React quickstart: Create and initialize Supabase client
Initialize the Supabase client in your React app using createClient from @supabase/supabase-js, passing in VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY from environment variables via import.meta.env.
React quickstart: Query data from Supabase
Query data using supabase.from('table_name').select(). The method returns an object with data and error properties. If error is null, data contains the query results.
React quickstart: Complete example - fetch and display data
This example shows how to fetch data from a Supabase table and display it in a React component: import { createClient } from '@supabase/supabase-js' import { useEffect, useState } from 'react' const supabase = createClient( import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY ) function App() { const [instruments, setInstruments] = useState([]) useEffect(() => { getInstruments() }, []) async function getInstruments() { const { data, error } = await supabase.from('instruments').select() if (error) { console.error(error) return } setInstruments(data) } return ( <ul> {instruments.map((instrument) => ( <li key={instrument.name}>{instrument.name}</li> ))} </ul> ) } export default App
Refine App configuration with Supabase
In the Refine `<Refine>` component, pass `dataProvider={dataProvider(supabaseClient)}` and `liveProvider={liveProvider(supabaseClient)}` to connect to Supabase. Both providers come from `@refinedev/supabase`.
Run Refine development server
Start the Refine development server with `npm run dev`. The app will be available at http://localhost:5173/instruments where you can interact with the auto-generated CRUD pages.
Refine routes configuration for instruments CRUD
Configure routes in `src/App.tsx` by adding a resource object with `name: 'instruments'` and paths: `list: '/instruments'`, `create: '/instruments/create'`, `edit: '/instruments/edit/:id'`, and `show: '/instruments/show/:id'`. Add corresponding Route elements in the Routes component for each path.
Generate Refine resource pages with create-resource command
Run `npm run refine create-resource instruments` to automatically add resources and generate pages for the `instruments` table. This creates pages for `list`, `create`, `show`, and `edit` actions in the `src/pages/instruments/` directory with `<HeadlessInferencer />` components.
Refine Inferencer dependencies for instruments
The `<HeadlessInferencer />` component used to auto-generate list, create, show, and edit pages requires `@refinedev/react-table` and `@refinedev/react-hook-form`. Install them with: `npm install @refinedev/react-table @refinedev/react-hook-form`.
supabaseClient configuration in Refine
Configure the Supabase client in `src/utility/supabaseClient.ts` using: `import { createClient } from '@refinedev/supabase'`. Call `createClient(SUPABASE_URL, SUPABASE_KEY, { db: { schema: 'public' }, auth: { persistSession: true } })`. The client reads URL and publishable key from environment variables `import.meta.env.VITE_SUPABASE_URL` and `import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY`.
Initialize Supabase client in Vue
Create a file at `/src/lib/supabaseClient.js` with the following code to initialize the Supabase client: ```js import { createClient } from '@supabase/supabase-js' const supabaseUrl = import.meta.env.VITE_SUPABASE_URL const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY export const supabase = createClient(supabaseUrl, supabasePublishableKey) ``` This exports a configured Supabase client instance that can be imported and used throughout your Vue app.
Install supabase-js client library for Vue
Install the Supabase JavaScript client library by running `npm install @supabase/supabase-js` in the root of your Vue app directory. This library provides the interface for working with Supabase from a Vue application.
Query database from Vue component
The following code shows how to query data from a Supabase table in a Vue component: ```vue <script setup> import { onMounted, ref } from 'vue' import { supabase } from './lib/supabaseClient' const instruments = ref([]) async function getInstruments() { const { data } = await supabase.from('instruments').select() instruments.value = data } onMounted(() => { getInstruments() }) </script> <template> <ul> <li v-for="instrument in instruments" :key="instrument.id">{{ instrument.name }}</li> </ul> </template> ``` This example fetches all rows from the 'instruments' table on component mount and renders them as a list.
Supabase Flutter client initialization with credentials
Initialize the Supabase client in the main function using `await Supabase.initialize(url: 'YOUR_SUPABASE_URL', publishableKey: 'YOUR_SUPABASE_PUBLISHABLE_KEY')` before calling `runApp()`. Create a global reference with `final supabase = Supabase.instance.client;`. API credentials can be safely exposed on the client because Row Level Security is enabled on the database.
Create Supabase client helper file
Create a helper file at `src/supabaseClient.js` to initialize the Supabase client with the Project URL and API key from environment variables. This file centralizes the Supabase client configuration for use throughout the React application.
Kotlin Supabase dependencies version
Add these dependencies to build.gradle (app): implementation "io.github.jan-tennert.supabase:postgrest-kt:$supabase_version", implementation "io.github.jan-tennert.supabase:storage-kt:$supabase_version", implementation "io.github.jan-tennert.supabase:auth-kt:$supabase_version", implementation "io.ktor:ktor-client-android:$ktor_version", implementation "io.ktor:ktor-client-core:$ktor_version", implementation "io.ktor:ktor-utils:$ktor_version". Also add the serialization plugin: id 'org.jetbrains.kotlin.plugin.serialization' version '$kotlin_version' matching your Kotlin version.
Using vanity subdomain in Supabase client library
When using a vanity subdomain in client code, initialize the Supabase client with the subdomain URL: `const supabase = createClient('https://my-example-brand.supabase.co', 'sb_publishable_...')`
Using custom domain in Supabase client library
When using a custom domain in client code, initialize the Supabase client with the custom domain URL: `const supabase = createClient('https://api.example.com', 'sb_publishable_...')`
Pop message from queue in JavaScript
Example of dequeueing a message using the Supabase JavaScript client: ```tsx const popFromQueue = async () => { const result = await supabase.schema('pgmq_public').rpc('pop', { queue_name: 'foo' }) console.log(result) } ``` This retrieves and removes a message from the queue named 'foo'.
Send message to queue in Python
Example of enqueueing a message using the Supabase Python client: ```python def send_to_queue(): result = supabase.schema("pgmq_public").rpc( "send", { "queue_name": "foo", "message": {"hello": "world"}, "sleep_seconds": 30, } ).execute() print(result) ``` This sends a JSON message to the queue named 'foo' with a 30-second sleep delay.
Pop message from queue in Python
Example of dequeueing a message using the Supabase Python client: ```python def pop_from_queue(): result = supabase.schema("pgmq_public").rpc( "pop", {"queue_name": "foo"} ).execute() print(result) ``` This retrieves and removes a message from the queue named 'foo'.