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

创建一个表

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

  1. 在控制台找到表编辑器页面。
  2. 点击 新建表 创建一个表命名为 todos.
  3. 点击 保存.
  4. 点击 插入列 创建一个名为task，text类型的列。
  5. 点击 保存。
   -- Create a table called "todos" with a column to store tasks.
create table
  todos (
    id bigint generated by default as identity primary key,
    task text check (char_length(task) > 3)
  );

API URL 和 密钥

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

  1. 进入控制面板中的设置页面。
  2. 单击侧栏中的 API。
  3. 在此页面找到您的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 表进行请求。

  // Initialize the JS client
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

// Make a request
const { data: todos, error } = await supabase.from('todos').select('*')
  
  # Append /rest/v1/ to your URL, and then use the table name as the route
curl '<SUPABASE_URL>/rest/v1/todos' \
-H "apikey: <SUPABASE_ANON_KEY>" \
-H "Authorization: Bearer <SUPABASE_ANON_KEY>"
JS 参考: select(), insert(), update(), upsert(), delete(), rpc() (调用Postgres函数).

rpc()用于调用 PostgreSQL 函数

GraphQL API

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

  import { createClient, useQuery } from 'urql'

// Prepare API key and Authorization header
const headers = {
  apikey: <SUPABASE_ANON_KEY>,
  authorization: `Bearer ${<SUPABASE_ANON_KEY>}`,
}

// Create GraphQL client
// See: https://formidable.com/open-source/urql/docs/basics/react-preact/#setting-up-the-client
const client = createClient({
  url: '<SUPABASE_URL>/graphql/v1',
  fetchOptions: function createFetchOptions() {
    return { headers }
  },
})

// Prepare our GraphQL query
const TodosQuery = `
  query {
    todosCollection {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`

// Query for the data (React)
const [result, reexecuteQuery] = useQuery({
  query: TodosQuery,
})

// Read the result
const { data, fetching, error } = result
  
  # Append /graphql/v1/ to your URL, and then use the table name as the route
curl --request POST '<SUPABASE_URL>/graphql/v1' \
-H 'apikey: <SUPABASE_ANON_KEY>' \
-H 'Authorization: Bearer <SUPABASE_ANON_KEY>' \
-H 'Content-Type: application/json' \
-d '{ "query":"{ todos(first: 3) { edges { node { id } } } }" }'

Realtime API

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

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

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

  // Initialize the JS client
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

// Create a function to handle inserts
const handleInserts = (payload) => {
  console.log('Change received!', payload)
}

// Listen to inserts
const { data: todos, error } = await supabase.from('todos').on('INSERT', handleInserts).subscribe()

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