A simple wrapper around Supabase.js to enable usage within Solid.
npm install @supabase/supabase-js solid-supabase # or pnpm or yarnIn the root of your app, use the SupabaseProvider and pass the supabase client with your credentials.
import { render } from 'solid-js/web'
import { createClient } from '@supabase/supabase-js'
import { SupabaseProvider } from 'solid-supabase'
import App from './App'
const supabase = createClient('SUPABASE_URL', 'SUPABASE_KEY')
render(
() => (
<SupabaseProvider client={supabase}>
<App />
</SupabaseProvider>
),
document.getElementById('root'),
)This will make the supabase client available anywhere along the component tree.
import { Match, Switch, createResource, createSignal } from 'solid-js'
import { useSupabase } from 'solid-supabase'
const App = () => {
const supabase = useSupabase()
const [postId] = createSignal(1)
const [data, { refetch }] = createResource(postId, (arg) => {
return supabase.from('posts').select('*').eq('id', arg)
})
return (
<Switch>
<Match when={data.loading}>
<div>Loading...</div>
</Match>
<Match when={data.error}>
<div>{data.error}</div>
</Match>
<Match when={data()}>
<pre>{JSON.stringify(data(), null, 2)}</pre>
<button onClick={refetch}>Refetch</button>
</Match>
</Switch>
)
}
export default AppOther available primitives
import {
useOnAuthStateChange,
useSupabaseAuth,
useSupabaseFrom,
useSupabaseStorage,
} from 'solid-supabase'
const auth = useSupabaseAuth() // auth.signOut()
const storage = useSupabaseStorage() // storage.listBuckets()
const from = useSupabaseFrom() // from('posts').select('*').eq('id', arg)
useOnAuthStateChange((event, session) => {
console.log(event, session)
})MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent