Nuxt Supabase Query

A useAsyncData-like solution for Supabase select queries

Features

• Simpler API for cleaner code
• Written on top of Postgrest-JS
• Allow passing filters as a computed function, so re-fetching can occur if the query changes
• Shared results from SSR for Hydration across instances
• Support "count" as ref returned next to data
• Work with custom schemas
• Support useAsyncData options such as server, immediate, and watch
• Fully typed, including errors (since errors should always be Postgrest Errors)
• Offer an abstraction around range() for infinite scroll style loading

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-supabase-query

That's it! You can now use Nuxt Supabase Query in your Nuxt app ✨

Demo

Usage with Nuxt Supabase Module

const supabase = useSupabaseClient()
const { data, count, error, status } = await useSupabaseQuery(
  supabase,
  'table',
  '*',
  filter => filter.eq('id', 'example'),
  {count: 'exact', single: false}
)

Usage with Supabase-JS

import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
const { data, count, error, status } = await useSupabaseQuery(
  supabase,
  'table',
  '*',
  filter => filter.eq('id', 'example'),
  {count: 'exact', single: false}
)

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release