mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
127 lines
3.8 KiB
Plaintext
Executable File
127 lines
3.8 KiB
Plaintext
Executable File
---
|
|
id: getting-started
|
|
title: Getting Started
|
|
description: 'How to install Supabase and start interacting with your database'
|
|
---
|
|
|
|
|
|
## Installing
|
|
|
|
```bash
|
|
npm install --save @supabase/supabase-js
|
|
# OR
|
|
yarn add @supabase/supabase-js
|
|
```
|
|
|
|
|
|
## Initializing
|
|
|
|
```js
|
|
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')`.
|
|
|
|
```ts
|
|
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:
|
|
|
|
```txt
|
|
https://your-project.supabase.co/rest/v1/?apikey=your-anon-key
|
|
```
|
|
|
|
Using the open source [swagger-to-ts](https://github.com/manifoldco/swagger-to-ts#%EF%B8%8F-reading-specs-from-remote-resource) tool you can generate your types and store them locally:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```ts
|
|
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()`
|
|
|
|
```js
|
|
createClient('supabaseURL', 'supabaseKey', OPTIONS)
|
|
```
|
|
|
|
#### `supabaseURL: string`
|
|
The unique Supabase URL which is supplied when you create a new project in [your project dashboard](https://app.supabase.io).
|
|
|
|
#### `supabaseKey: string`
|
|
The unique Supabase Key which is supplied when you create a new project in [your project dashboard](https://app.supabase.io).
|
|
|
|
#### `OPTIONS: object?`
|
|
|
|
```js
|
|
/**
|
|
* @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'
|
|
}
|
|
```
|