Nutritious Pancake Mountain

    use-supabase
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    Use Supabase

    NPM

    A simple package to boost your supabase consumer app.

      // get automatic SWR revalidation on a whole table or a specific column in it
      const { data: siteData } = useTable("site", "*");
      const { data: siteIdData } = useTable("site", "site_id");
    
      // grab the client to doing anything you want.
      const client = useSupabase();
    
      // create a query and use all the postgres query options
      const query = useSupabase().from("site").select("*");
      // pass that query to useQuery and get automatic SWR revalidation on it.
      const { data: queryData } = useQuery(query);
    

    Initialize Supabase

    To get access to the hooks first pass use the SupabaseContextProvider at the root of your app.

    Creat-React-App

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
    import { SupabaseContextProvider } from 'use-supabase'
    
    import reportWebVitals from './reportWebVitals'
    import { createClient } from '@supabase/supabase-js'
    
    const supabase = createClient('supabase-url', 'supabase-anon-key')
    
    ReactDOM.render(
      <React.StrictMode>
        <SupabaseContextProvider client={supabase}>
          <App />
        </SupabaseContextProvider>
      </React.StrictMode>,
      document.getElementById('root')
    )
    
    reportWebVitals()

    Next.js

    If you are using Next.js create a custom _app.tsx like explained here.

    Hooks

    There are a series of hooks that are made available and usable at your convenience.

    useSupabase


    useSupabase is the most simple hook in this library. It returns the supabase js client from the context.

      const { auth, from } = useSupabase()
    

    useTable


    useTable implements a stale while revalidate strategy. It is a convenient hook to quickly get all information from a table and revalidating the data with the best web performance principles. It will default to getting all the columns on a table but you can pass a select object to specify more details in the query.

    const { data } = useTable('users', '*')
    

    useQuery


    useQuery gives you the same SWR capacities as useTable but gives you complete granular control on the query you pass.

    const query = useSupabase().from('users').select('*').eq(...)
    const { data } = useQuery(query)
    

    useUser (deprecated)

    useUser gives you access to the supabase client user. While it works in all React applications. If you are using a metaframework like Next.js or Remix, you might prefer to use the supabbase auth helpers.

    The context will make avaialble to the hooks the client and the user so that you can use it anywhere along the react component tree.

    Install

    npm i use-supabase

    DownloadsWeekly Downloads

    45

    Version

    2.0.1

    License

    Apache-2.0

    Unpacked Size

    35.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • gbibeaulaviolette