Files
supabase/apps/reference/docs/guides/database/arrays.mdx
2022-08-13 22:24:54 +08:00

176 lines
3.6 KiB
Plaintext

---
id: arrays
title: 'Working With Arrays'
description: How to use arrays in PostgreSQL and the Supabase API.
---
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
PostgreSQL supports flexible [array types](https://www.postgresql.org/docs/12/arrays.html). These arrays are also supported in the Supabase Dashboard and in the JavaScript API.
## Create a table with an array column
Create a test table with a text array (an array of strings):
<Tabs
groupId="dashboard-or-sql"
defaultValue="dashboard"
values={[
{label: 'Dashboard', value: 'dashboard'},
{label: 'SQL', value: 'sql'},
]}>
<TabItem value="dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Click **New Table** and create a table with the name `arraytest`.
1. Click **Save**.
1. Click **New Column** and create a column with the name `textarray`, type `text`, and select **Define as array**.
1. Click **Save**.
</TabItem>
<TabItem value="sql">
```sql
CREATE TABLE arraytest (id integer NOT NULL, textarray text ARRAY);
```
</TabItem>
</Tabs>
## Insert a record with an array value
<Tabs
groupId="dashboard-or-sql"
defaultValue="dashboard"
values={[
{label: 'Dashboard', value: 'dashboard'},
{label: 'SQL', value: 'sql'},
{label: 'JavaScript', value: 'javascript'},
]}>
<TabItem value="dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Select the `arraytest` table.
1. Click **Insert row** and add `["Harry", "Larry", "Moe"]`.
1. Click **Save.**
</TabItem>
<TabItem value="sql">
```sql
INSERT INTO arraytest (id, textarray) VALUES (1, ARRAY['Harry', 'Larry', 'Moe']);
```
</TabItem>
<TabItem value="javascript">
Insert a record from the JavaScript client:
```js
const { data, error } = await supabase
.from('arraytest')
.insert([{ id: 2, textarray: ['one', 'two', 'three', 'four'] }])
```
</TabItem>
</Tabs>
## View the results
<Tabs
groupId="dashboard-or-sql"
defaultValue="dashboard"
values={[
{label: 'Dashboard', value: 'dashboard'},
{label: 'SQL', value: 'sql'},
]}>
<TabItem value="dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Select the `arraytest` table.
You should see:
| id | textarray |
| --- | ----------------------- |
| 1 | ["Harry","Larry","Moe"] |
</TabItem>
<TabItem value="sql">
```sql
SELECT * FROM arraytest;
```
You should see:
| id | textarray |
| --- | ----------------------- |
| 1 | ["Harry","Larry","Moe"] |
</TabItem>
</Tabs>
## Query array data
PostgreSQL uses 1-based indexing (e.g., `textarray[1]` is the first item in the array).
<Tabs
groupId="dashboard-or-sql"
defaultValue="sql"
values={[
{label: 'SQL', value: 'sql'},
{label: 'JavaScript', value: 'javascript'},
]}>
<TabItem value="sql">
To select the first item from the array and get the total length of the array:
```js
SELECT textarray[1], array_length(textarray, 1) FROM arraytest;
```
returns:
| textarray | array_length |
| --------- | ------------ |
| Harry | 3 |
</TabItem>
<TabItem value="javascript">
This returns the entire array field:
```js
const { data, error } = await supabase.from('arraytest').select('textarray[]')
console.log(JSON.stringify(data, null, 2))
```
returns:
```js
;[
{
textarray: ['Harry', 'Larry', 'Moe'],
},
]
```
</TabItem>
</Tabs>
## Resources
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Supabase Account - Free Tier OK](https://supabase.com)
- [PostgreSQL Arrays](https://www.postgresql.org/docs/12/arrays.html)