Options
All
  • Public
  • Public/Protected
  • All
Menu

react-supabase-fp

Index

Type aliases

Variables

Functions

Type aliases

Filter

Filter<Data>: (query: PostgrestFilterBuilder<Data>) => PostgrestFilterBuilder<Data>

Type parameters

  • Data

Type declaration

    • (query: PostgrestFilterBuilder<Data>): PostgrestFilterBuilder<Data>

    • A function that takes a query and filters it

      Parameters

      • query: PostgrestFilterBuilder<Data>

      Returns PostgrestFilterBuilder<Data>

UseSignInOptions

UseSignInOptions: { redirectTo?: string; scopes?: string }

Type declaration

  • Optional Readonly redirectTo?: string
  • Optional Readonly scopes?: string

UseSingleResponse

UseSingleResponse<T>: readonly [RD.RemoteData<string, T>, () => Promise<void>]

Type parameters

  • T

UseTableResponse

UseTableResponse<T>: readonly [RD.RemoteData<string, readonly T[]>, () => Promise<void>]

Type parameters

  • T = unknown

Variables

Const Provider

Provider: Provider<null | default> = ...

A provider for SupabaseContext. Everything must be wrapped in this.

example
import { createClient } from '@supabase/supabase-js';

const client = createClient('url', 'anonKey');

return (
  <Provider value={client}>
    <Consumer />
  </Provider>
);

Const SupabaseContext

SupabaseContext: React.Context<SupabaseClient | null> = ...

The context that contains the Supabase Client

see

Provider for usage

Functions

Const useDelete

  • useDelete<T>(tableName: string, eq?: Eq<readonly T[]>): readonly [RemoteData<string, readonly T[]>, (filter: Filter<T>) => Promise<void>]

  • Deletes data from a supabase table.

    example
    const filter = useFilter<Foo>((query) => query.gt("id", "5"));
const [result, execute] = useDelete<Foo>("foo");

pipe(
  result,
  RD.fold(
    () => <button onClick={() => execute(filter)}>Click me</button>,
    () => <div>Loading...</div>,
    (e) => <div>Error {e}</div>,
    (rows) => (
      <div>
        Deleted
        {rows.map((row) => (
          <div key={row.id}>{row.bar}</div>
        ))}
      </div>
    )
  )
);

    Type parameters

    • T = unknown

    Parameters

    • tableName: string

      Name of the table you want to delete from

    • eq: Eq<readonly T[]> = ...

      Eq to compare your type

    Returns readonly [RemoteData<string, readonly T[]>, (filter: Filter<T>) => Promise<void>]

    A list of rows that were deleted, and the function to delete them

Const useFilter

  • useFilter<Data>(filter: Filter<Data>, deps?: readonly unknown[]): Filter<Data>

  • Creates a react-safe filter for use in other hooks.

    example
    const filter = useFilter<Foo>(query => query.eq('id', 1));

    Type parameters

    • Data = unknown

    Parameters

    • filter: Filter<Data>

      A function that filters your query

    • deps: readonly unknown[] = []

      An array of deps to regenerate your filter

    Returns Filter<Data>

    A filter

Const useInsert

  • useInsert<T>(tableName: string, eq?: Eq<readonly T[]>): readonly [RemoteData<string, readonly T[]>, (values: Partial<T> | Partial<T>[]) => Promise<void>]

  • Inserts data into a supabase table.

    example
    const [result, execute] = useInsert<Foo>("foo");

pipe(
  result,
  RD.fold(
    () => (
      <button
        onClick={() =>
          execute({
            bar: "baz",
          })
        }
      >
        Click me
      </button>
    ),
    () => <div>Loading...</div>,
    (e) => <div>Error {e}</div>,
    (rows) => (
      <div>
        Inserted
        {rows.map((row) => (
          <div key={row.id}>{row.bar}</div>
        ))}
      </div>
    )
  )
);

    Type parameters

    • T = unknown

    Parameters

    • tableName: string

      The name of the table you want to insert into

    • eq: Eq<readonly T[]> = ...

      An Eq for your data type

    Returns readonly [RemoteData<string, readonly T[]>, (values: Partial<T> | Partial<T>[]) => Promise<void>]

    The result of the request and a function to execute the insertion

Const useSignIn

  • useSignIn(): readonly [RemoteData<Error, Session>, (credentials: UserCredentials, options?: UseSignInOptions) => Promise<void>]

  • Signs in a user.

    example
      const [result, execute] = useSignIn();

  return (
    <div>
      <button
        onClick={e => {
          e.preventDefault();
          execute({ provider: 'google' });
        }}
      >
        Log in
      </button>
    </div>
  );

    Returns readonly [RemoteData<Error, Session>, (credentials: UserCredentials, options?: UseSignInOptions) => Promise<void>]

    The result of the signing in, and a function to sign a user in.

Const useSignOut

  • useSignOut(): readonly [RemoteData<Error, void>, () => Promise<void>]

  • Signs out a user.

    example
    const [result, signOut] = useSignOut();

return (
  <button
    onClick={(e) => {
      e.preventDefault();
      signOut();
    }}
  >
    Sign out
  </button>
);

    Returns readonly [RemoteData<Error, void>, () => Promise<void>]

    The result of the signing out, and a function to sign a user out.

Const useSingle

  • Gets a single row from a supabase table.

    example
    const filter = useFilter<Foo>((query) => query.gt("id", "5"));
const [result, execute] = useSingle<Foo>("foo", "*", filter);

pipe(
  result,
  RD.fold3(
    () => <div>Loading...</div>,
    (e) => <div>Error {e}</div>,
    (row) => <div>{row.bar}</div>
  )
);

    Type parameters

    • T = unknown

    Parameters

    • tableName: string

      The table name to get a row from

    • selectArgs: string = '*'

      Arguments for a select query

    • Optional filter: Filter<T>

      A filter for your query

    • eq: Eq<T> = ...

      An Eq for your data type

    Returns UseSingleResponse<T>

    A single row, and a function to reexecute the query

Const useSupabase

  • useSupabase(): Option<default>

  • Gets the current supabase client.

    Returns Option<default>

    A SupabaseClient, if it exists

Const useTable

  • useTable<T>(tableName: string, selectArgs?: string, filter?: Filter<T>, eq?: Eq<readonly T[]>): UseTableResponse<T>

  • Gets many rows from a supabase table.

    example
    const filter = useFilter<Foo>((query) => query.gt("id", "5"));
const [result, reexecute] = useTable<Foo>("foo", "id, bar", filter);
pipe(
  result,
  RD.fold3(
    () => <div>Loading...</div>,
    (e) => <div>Error {e}</div>,
    (rows) => (
      <div>
        {rows.map((row) => (
          <div key={row.id}>{row.bar}</div>
        ))}
      </div>
    )
  )
);

    Type parameters

    • T = unknown

    Parameters

    • tableName: string

      The table name to get rows from

    • selectArgs: string = '*'

      Arguments for a select query

    • Optional filter: Filter<T>

      A filter for your query

    • eq: Eq<readonly T[]> = ...

      An Eq for your data type

    Returns UseTableResponse<T>

    Rows that match your filter, or all rows if there is no filter, and a function to reexecute the query

Const useUpdate

  • useUpdate<T>(tableName: string, eq?: Eq<readonly T[]>): readonly [RemoteData<string, readonly T[]>, (values: Partial<T>, filter: Filter<T>) => Promise<void>]

  • Updates some rows from a supabase table.

    example
    const filter = useFilter<Foo>((query) => query.eq("id", "1"));
const [result, execute] = useUpdate<Foo>("foo");

pipe(
  result,
  RD.fold(
    () => <button onClick={() => execute({ bar: "baz" }, filter)}></button>,
    () => <div>Loading...</div>,
    (e) => <div>Error {e}</div>,
    (rows) => (
      <div>
        Updated
        {rows.map((row) => (
          <div key={row.id}>
            {row.id} - {row.bar}
          </div>
        ))}
      </div>
    )
  )
);

    Type parameters

    • T = unknown

    Parameters

    • tableName: string

      The table name to update inside of

    • eq: Eq<readonly T[]> = ...

      An Eq for your data type

    Returns readonly [RemoteData<string, readonly T[]>, (values: Partial<T>, filter: Filter<T>) => Promise<void>]

    The rows that were updated, and a function to execute the update.

Const useUpsert

  • useUpsert<T>(tableName: string): readonly [RemoteData<string, readonly T[]>, (values: Partial<T> | Partial<T>[], filter?: Filter<T>) => Promise<void>]

  • Upserts into a supabase table.

    example
    const filter = useFilter<Foo>((query) => query.eq("id", "1"));
const [result, execute] = useUpsert<Foo>("foo");

pipe(
  result,
  RD.fold(
    () => <button onClick={() => execute({ bar: "baz" }, filter)}></button>,
    () => <div>Loading...</div>,
    (e) => <div>Error {e}</div>,
    (rows) => (
      <div>
        Updated
        {rows.map((row) => (
          <div key={row.id}>
            {row.id} - {row.bar}
          </div>
        ))}
      </div>
    )
  )
);

    Type parameters

    • T = unknown

    Parameters

    • tableName: string

      The table name to upsert into

    Returns readonly [RemoteData<string, readonly T[]>, (values: Partial<T> | Partial<T>[], filter?: Filter<T>) => Promise<void>]

    The rows that were updated

Const useUser

  • useUser(): Option<User>

  • Returns the current logged in user, or None if no one is logged in

    Returns Option<User>

Const useUserLoggedIn

  • useUserLoggedIn(): boolean

Generated using TypeDoc