创建 API 路由

当您创建Postgres表、视图或函数时，会自动创建API路由。

创建一个表

我们通过创建一个名为 todos 的表来创建我们的第一个 API 路由，用于存储任务。这个操作将创建一个相应的路由 todos ，它可以接受 GET, POST, PATCH, 和 DELETE 请求。

在控制台找到表编辑器页面。
点击 新建表 创建一个表命名为 todos.
点击保存.
点击 插入列 创建一个名为task，text类型的列。
点击保存。

API URL 和密钥#

每个Supabase项目都有一个唯一的API URL。你的API被放置在一个API网关后面，每个请求都需要API密钥进行身份验证。

进入控制面板中的设置页面。
单击侧栏中的 API。
在此页面找到您的API URL、anon和service_role密钥。

通过以下URL可以访问 Supabase 的 REST API 和 GraphQL API：

REST: https://<project_ref>.supabase.co/rest/v1
GraphQL: https://<project_ref>.supabase.co/graphql/v1

这两种路径都需要通过apikey头部传递anon密钥。

使用 API#

REST API#

您可以直接通过HTTP请求与API交互，也可以使用我们提供的客户端库。

我们来看看如何使用我们提供的 API URL（SUPABASE_URL）和密钥（SUPABASE_ANON_KEY），对我们在第一步创建的 todos 表进行请求。

1// Initialize the JS client
2import { createClient } from '@supabase/supabase-js'
3const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
4
5// Make a request
6const { data: todos, error } = await supabase.from('todos').select('*')

JS 参考: select()， insert()， update()， upsert()， delete()， rpc() 。

rpc()用于调用 PostgreSQL 函数

GraphQL API#

您可以在Supabase GraphQL API中使用任何GraphQL客户端。在我们的GraphQL示例中，我们将使用 urql。

1import { createClient, useQuery } from 'urql'
2
3// Prepare API key and Authorization header
4const headers = {
5  apikey: <SUPABASE_ANON_KEY>,
6  authorization: `Bearer ${<SUPABASE_ANON_KEY>}`,
7}
8
9// Create GraphQL client
10// See: https://formidable.com/open-source/urql/docs/basics/react-preact/#setting-up-the-client
11const client = createClient({
12  url: '<SUPABASE_URL>/graphql/v1',
13  fetchOptions: function createFetchOptions() {
14    return { headers }
15  },
16})
17
18// Prepare our GraphQL query
19const TodosQuery = `
20  query {
21    todosCollection {
22      edges {
23        node {
24          id
25          title
26        }
27      }
28    }
29  }
30`
31
32// Query for the data (React)
33const [result, reexecuteQuery] = useQuery({
34  query: TodosQuery,
35})
36
37// Read the result
38const { data, fetching, error } = result

Realtime API#

默认情况下，数据库中的Realtime是禁用的。让我们打开todos表的Realtime。

进入仪表板中的数据库页面。
点击侧边栏中的Replication 。·
通过切换插入、更新和删除来控制哪些数据库事件被发送。
通过选择Source和切换每个表来控制哪些表被发送变化。

从客户端，我们可以监听插入 todos 表的任何新数据：

1// Initialize the JS client
2import { createClient } from '@supabase/supabase-js'
3const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
4
5// Create a function to handle inserts
6const handleInserts = (payload) => {
7  console.log('Change received!', payload)
8}
9
10// Listen to inserts
11const { data: todos, error } = await supabase.from('todos').on('INSERT', handleInserts).subscribe()

使用 subscribe() 来监听数据库变化。实时 API 通过 PostgreSQL 的复制功能生效。 Postgres 将数据库变化发送到一个叫做 supabase_realtime 的发布，通过管理这个发布，你可以控制哪些数据被广播。