react-supabase-fp

react-supabase-fp is a Typescript library for using supabase with React and fp-ts.

Docs Github

Installation

Install react-supabase-fp with yarn or npm:

yarn add react-supabase-fp fp-ts @devexperts/remote-data-ts @supabase/supabase-js

See also: fp-ts and remote-data-ts

Features

• Auth
• Data
• Filters
• Code examples for all functions
• Realtime
• Storage

Usage

const filter = useFilter<definitions['example']>(query =>
  query.contains('type', 'published')
);
const [result, reexecute] = useTable<definitions['example']>(
  'example',
  '*',
  filter
);

return pipe(
  result,
  RD.fold3(
    // constant = x => () => x
    constant(<div>Loading...</div>), // used when in loading state
    e => <div>Query failed: {e}</div>, // used when in an error state
    // used on success
    result => (
      <>
        <h1>Published posts</h1>
        <div>
          {result.map(row => (
            <div key={row.id}>
              <h2>{row.text}</h2>
              {row.optional && <p>{row.optional}</p>}
            </div>
          ))}
        </div>
      </>
    )
  )
);

See the example folder for more.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

ISC