https://github.com/wobsoriano/solid-supabase

A simple wrapper around Supabase.js to enable usage within Solid.
https://github.com/wobsoriano/solid-supabase

solid solid-js supabase

Last synced: 4 months ago
JSON representation

A simple wrapper around Supabase.js to enable usage within Solid.

• Host: GitHub
• URL: https://github.com/wobsoriano/solid-supabase
• Owner: wobsoriano
• License: mit
• Created: 2021-08-16T08:40:52.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-15T17:17:03.000Z (over 1 year ago)
• Last Synced: 2024-09-25T23:31:13.364Z (4 months ago)
• Topics: solid, solid-js, supabase
• Language: TypeScript
• Homepage:
• Size: 231 KB
• Stars: 38
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  



# solid-supabase

A simple wrapper around Supabase.js to enable usage within Solid.

## Installation

```bash

npm install @supabase/supabase-js solid-supabase # or pnpm or yarn

```

## Quick start

In the root of your app, use the `SupabaseProvider` and pass the supabase client with your credentials.

```tsx

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(

  () => (

    

      

    

  ),

  document.getElementById('root'),

)

```

This will make the supabase client available anywhere along the component tree.

## Use the primitive

```tsx

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 (

    

      

        
Loading...

      

      

        
{data.error}

      

      

        
{JSON.stringify(data(), null, 2)}

        Refetch

      

    

  )

}


export default App

```

Other available primitives

```ts

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)

})

```

## License

MIT