Quickstart: React (Vite)

npm create vite@latest notes -- --template react-ts
cd notes
npm install
npm install @sovaria/sdk

VITE_SOVARIA_URL=https://<project-ref>.sovarias.in
VITE_SOVARIA_ANON_KEY=<anon-key>

import { createClient } from '@sovaria/sdk'

export const sovaria = createClient(import.meta.env.VITE_SOVARIA_URL, import.meta.env.VITE_SOVARIA_ANON_KEY)

// data.sql answers { columns, rows, row_count }; rows are arrays in column order.
export function toObjects<T>(result: { columns: string[]; rows: unknown[][] }): T[] {
  return result.rows.map((row) => Object.fromEntries(result.columns.map((c, i) => [c, row[i]])) as T)
}

import { useEffect, useState, type FormEvent } from 'react'
import { SovariaError } from '@sovaria/sdk'
import { sovaria, toObjects } from './sovaria'
import { useSession } from './useSession'

type Note = { id: number; body: string }

export default function App() {
  const session = useSession()
  const [notes, setNotes] = useState<Note[]>([])
  const [error, setError] = useState('')
  const fail = (err: unknown) => setError(err instanceof SovariaError ? err.message : String(err))

  const load = () =>
    sovaria.data.sql('select id, body from notes order by id desc')
      .then((r) => setNotes(toObjects<Note>(r as never)))
      .catch(fail)
  useEffect(() => { if (session) load() }, [session])

  async function signIn(form: HTMLFormElement, create: boolean) {
    const f = new FormData(form)
    const [email, password] = [String(f.get('email')), String(f.get('password'))]
    try {
      await (create ? sovaria.auth.signUp(email, password) : sovaria.auth.signIn(email, password))
    } catch (err) { fail(err) }
  }

  async function add(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const input = e.currentTarget.elements.namedItem('body') as HTMLInputElement
    try {
      await sovaria.data.sql('insert into notes (body) values ($1)', [input.value])
      input.value = ''
      await load()
    } catch (err) { fail(err) }
  }

  if (!session) return (
    <form onSubmit={(e) => { e.preventDefault(); signIn(e.currentTarget, false) }}>
      <input name="email" type="email" required /> <input name="password" type="password" required />
      <button>Sign in</button>
      <button type="button" onClick={(e) => signIn(e.currentTarget.form!, true)}>Create account</button>
      {error && <p role="alert">{error}</p>}
    </form>
  )

  return (
    <main>
      <form onSubmit={add}><input name="body" required maxLength={2000} /> <button>Add</button></form>
      {error && <p role="alert">{error}</p>}
      <ul>{notes.map((n) => <li key={n.id}>{n.body}</li>)}</ul>
      <button onClick={() => sovaria.auth.signOut()}>Sign out</button>
    </main>
  )
}

npm run dev   # http://localhost:5173