* fix: rewrite relative URLs when syncing to GitHub discussion Relative URLs back to supabse.com won't work in GitHub discussions, so rewrite them back to absolute URLs starting with https://supabase.com * fix: replace all supabase urls with relative urls * chore: add linting for relative urls * chore: bump linter version * Prettier --------- Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
187 lines
4.3 KiB
Plaintext
187 lines
4.3 KiB
Plaintext
---
|
|
title: 'Build an API route in less than 2 minutes.'
|
|
subtitle: 'Create your first API route by creating a table called `todos` to store tasks.'
|
|
breadcrumb: 'API Quickstart'
|
|
hideToc: true
|
|
---
|
|
|
|
Let's create our first REST route which we can query using `cURL` or the browser.
|
|
|
|
We'll create a database table called `todos` for storing tasks. This creates a corresponding API route `/rest/v1/todos` which can accept `GET`, `POST`, `PATCH`, & `DELETE` requests.
|
|
|
|
<StepHikeCompact>
|
|
|
|
<StepHikeCompact.Step step={1}>
|
|
<StepHikeCompact.Details title="Set up a Supabase project with a 'todos' table">
|
|
|
|
[Create a new project](/dashboard) in the Supabase Dashboard.
|
|
|
|
After your project is ready, create a table in your Supabase database. You can do this with either the Table interface or the [SQL Editor](/dashboard/project/_/sql).
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
<Tabs
|
|
scrollable
|
|
size="small"
|
|
type="underlined"
|
|
defaultActiveId="sql"
|
|
queryGroup="database-method"
|
|
>
|
|
<TabPanel id="sql" label="SQL">
|
|
|
|
```sql
|
|
-- Create a table called "todos"
|
|
-- with a column to store tasks.
|
|
create table todos (
|
|
id serial primary key,
|
|
task text
|
|
);
|
|
```
|
|
|
|
</TabPanel>
|
|
<TabPanel id="dashboard" label="Dashboard">
|
|
|
|
<video width="99%" muted playsInline controls={true}>
|
|
<source
|
|
src="https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/docs/api/api-create-table-sm.mp4"
|
|
type="video/mp4"
|
|
/>
|
|
</video>
|
|
|
|
</TabPanel>
|
|
</Tabs>
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={2}>
|
|
|
|
<StepHikeCompact.Details title="Allow public access">
|
|
|
|
Let's turn on Row Level Security for this table and allow public access.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```sql
|
|
-- Turn on security
|
|
alter table "todos"
|
|
enable row level security;
|
|
|
|
-- Allow anonymous access
|
|
create policy "Allow public access"
|
|
on todos
|
|
for select
|
|
to anon
|
|
using (true);
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={3}>
|
|
<StepHikeCompact.Details title="Insert some dummy data">
|
|
|
|
Now we can add some data to our table which we can access through our API.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```sql
|
|
insert into todos (task)
|
|
values
|
|
('Create tables'),
|
|
('Enable security'),
|
|
('Add data'),
|
|
('Fetch data from the API');
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={4}>
|
|
<StepHikeCompact.Details title="Fetch the data">
|
|
|
|
Find your API URL and Keys in your Dashboard [API Settings](/dashboard/project/_/settings/api). You can now query your "todos" table by appending `/rest/v1/todos` to the API URL.
|
|
|
|
Copy this block of code, substitute `<PROJECT_REF>` and `<ANON_KEY>`, then run it from a terminal.
|
|
|
|
</StepHikeCompact.Details>
|
|
<StepHikeCompact.Code>
|
|
|
|
```bash Terminal
|
|
curl 'https://<PROJECT_REF>.supabase.co/rest/v1/todos' \
|
|
-H "apikey: <ANON_KEY>" \
|
|
-H "Authorization: Bearer <ANON_KEY>"
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
</StepHikeCompact>
|
|
|
|
## Bonus
|
|
|
|
There are several options for accessing your data:
|
|
|
|
### Browser
|
|
|
|
You can query the route in your browser, by appending the `anon` key as a query parameter:
|
|
|
|
`https://<PROJECT_REF>.supabase.co/rest/v1/todos?apikey=<ANON_KEY>`
|
|
|
|
### Client libraries
|
|
|
|
We provide a number of [Client Libraries](https://github.com/supabase/supabase#client-libraries).
|
|
|
|
<Tabs
|
|
scrollable
|
|
size="small"
|
|
type="underlined"
|
|
defaultActiveId="js"
|
|
queryGroup="language"
|
|
>
|
|
<TabPanel id="js" label="JavaScript">
|
|
|
|
```js
|
|
const { data, error } = await supabase.from('todos').select()
|
|
```
|
|
|
|
</TabPanel>
|
|
<$Show if="sdk:dart">
|
|
<TabPanel id="dart" label="Dart">
|
|
|
|
```dart
|
|
final data = await supabase.from('todos').select('*');
|
|
```
|
|
|
|
</TabPanel>
|
|
</$Show>
|
|
<$Show if="sdk:python">
|
|
<TabPanel id="python" label="Python">
|
|
|
|
```python
|
|
response = supabase.table('todos').select("*").execute()
|
|
```
|
|
|
|
</TabPanel>
|
|
</$Show>
|
|
<$Show if="sdk:swift">
|
|
<TabPanel id="swift" label="Swift">
|
|
|
|
```swift
|
|
let response = try await supabase.from("todos").select()
|
|
```
|
|
|
|
</TabPanel>
|
|
</$Show>
|
|
</Tabs>
|