Getting Started

Installing

npm install --save @supabase/supabase-js

# OR

yarn add @supabase/supabase-js

Initializing

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database

const supabase = createClient("https://xyzcompany.supabase.co", "public-anon-key");

Usage with TypeScript

Supabase-js ships with type definitions for usage with TypeScript and for convenient IntelliSense autocomplete and documentation in your editor.

When using TypeScript, you can pass the type of database row as a type parameter to the from method to get better autocompletion support down the chain. If you don't provide a type for the row you need to explicitly pass from<any>('tableName').

type Message = {

id: number;

inserted_at: string;

message: string;

user_id: string;

channel_id: number;

author: { username: string };

};

const response = await supabase

.from<Message>('messages') // Message maps to the type of the row in your database.

.select('*, author:user_id(username)')

.match({ channel_id: 2 }); // Your IDE will be able to help with automcompletion.

response.body // Response body will be of type Array<Message>.

// If you don't provide a type for the row you need to explicitly pass `from<any>('tableName')`.

const response = await supabase

.from<any>('messages')

.select('*, author:user_id(username)')

.match({ channel_id: 2 });

response.body // Response body will be of type Array<any>.

Generate database types from Swagger OpenAPI specification

Supabase generates a Swagger speficiation file for your database which can be used to generate your data types for usage with TypeScript.

The Swagger specification for your Supabase project can be accessed as follows:

https://your-project.supabase.co/rest/v1/?apikey=your-anon-key

Using the open source swagger-to-ts tool you can generate your types and store them locally:

npx @manifoldco/swagger-to-ts https://your-project.supabase.co/rest/v1/?apikey=your-anon-key --output types/supabase.ts

Note: Do note that your local types won't automatically stay in sync with your database, so make sure to regenerate your types after your make changes to your database.

After you have generated your types, you can use them in your TypeScript projects:

import { NextApiRequest, NextApiResponse } from "next";

import { createClient } from "@supabase/supabase-js";

import { definitions } from "../../types/supabase";

const supabase = createClient(

process.env.NEXT_PUBLIC_SUPABASE_URL,

process.env.SUPABASE_SECRET_KEY

);

export default async (req: NextApiRequest, res: NextApiResponse) => {

const allOnlineUsers = await supabase

.from<definitions["users"]>("users")

.select("*")

.eq("status", "ONLINE");

res.status(200).json(allOnlineUsers);

};

Reference

createClient()

createClient('supabaseURL', 'supabaseKey', OPTIONS)

supabaseURL: string

The unique Supabase URL which is supplied when you create a new project in your project dashboard.

supabaseKey: string

The unique Supabase Key which is supplied when you create a new project in your project dashboard.

OPTIONS: object?

/**

* @param {string} [schema='public']

* You can switch in between schemas.

* The schema however would need to be on the list of exposed schemas.

* Defaults to the 'public' schema.

* If there is the need to use more than one schema,

* another instance of .createClient() would need to be instantiated.

*/

const options = {

schema: 'public'

}