Supabase 数据查询入门

从这一篇开始进入真正的开发。先安装官方 JavaScript 客户端，再学会从最简单的全表查询到带条件的筛选、排序和分页。上一篇创建的 profiles 表将作为练习数据。

安装 supabase-js

在任意 Vue 或 Nuxt 项目里安装官方客户端

npm install @supabase/supabase-js

安装完成后创建客户端实例，把第二篇复制出来的配置填进去

// lib/supabase.js
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  'https://你的项目URL.supabase.co',
  '你的anon-public-key'
)

这两个值都来自 Settings 的 API 页面，anon key 是公开的，可以直接写在代码里。更好习惯是放进 .env 文件用环境变量读取，避免把不同环境的配置混在一起。

全表查询

最基础的查询，读取整张表的所有数据

const { data, error } = await supabase
  .from('profiles')
  .select('*')

console.log(data)   // 返回数组
console.log(error)  // 出错时不为 null

所有查询都返回两个字段，data 是查询结果，error 是错误信息。写代码时先判断 error 再做业务处理。

只查指定列

select 里写列名，只返回需要的字段，减少传输数据量

const { data } = await supabase
  .from('profiles')
  .select('username, age')

条件筛选

这是最常用的能力。所有条件方法都接收两个参数，列名和值

方法	含义	示例
.eq()	等于	age 等于 18
.neq()	不等于	年龄不等于 18
.gt()	大于	年龄大于 18
.gte()	大于等于	年龄大于等于 18
.lt()	小于	年龄小于 18
.lte()	小于等于	年龄小于等于 18
.in()	属于一组值	名字在某个列表里
.ilike()	模糊匹配，忽略大小写	名字包含某关键词

组合使用实现复杂条件，查询顺序对结果没有影响

// 18 岁以上的会员
const { data } = await supabase
  .from('profiles')
  .select('*')
  .eq('is_vip', true)
  .gt('age', 18)

模糊匹配适合做搜索框

// 昵称包含"小"的用户
const { data } = await supabase
  .from('profiles')
  .select('*')
  .ilike('username', '%小%')

排序

用 .order() 按某列排序，默认升序，传入 ascending: false 改为降序

const { data } = await supabase
  .from('profiles')
  .select('*')
  .order('created_at', { ascending: false })  // 最新的在前

分页

用 .range() 做分页，两个参数是起止索引，从 0 开始计数。一页 10 条的话，第一页是 range(0, 9)，第二页是 range(10, 19)

const page = 1
const pageSize = 10

const { data } = await supabase
  .from('profiles')
  .select('*')
  .order('created_at', { ascending: false })
  .range((page - 1) * pageSize, page * pageSize - 1)

在 Nuxt 中配合 useAsyncData

在 Nuxt 的页面组件里，用 useAsyncData 包裹查询，刷新页面时自动重新请求，组件挂载时自动执行

<script setup>
const { data: profiles } = await useAsyncData('profiles', async () => {
  const { data, error } = await supabase
    .from('profiles')
    .select('*')
  return data || []
})
</script>

<template>
  <ul>
    <li v-for="p in profiles" :key="p.id">{{ p.username }}</li>
  </ul>
</template>

常见问题

查询结果为空时，按顺序排查三件事

表里确实有数据
RLS 策略允许当前用户读取（第三篇提过，后面详解）
查询条件写错，比如列名拼写错误

下一篇学习数据的增加、修改和删除，顺便引出安全话题。

下一篇 Supabase 数据增删改

Supabase 数据建模入门

Supabase 数据增删改