227 lines
14 KiB
HTML
Executable File
227 lines
14 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html class="default">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="x-ua-compatible" content="IE=edge" />
|
||
<title>@supabase/supabase-js</title>
|
||
<meta name="description" content="Documentation for @supabase/supabase-js" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="stylesheet" href="assets/style.css" />
|
||
<link rel="stylesheet" href="assets/highlight.css" />
|
||
<script async src="assets/search.js" id="search-script"></script>
|
||
</head>
|
||
<body>
|
||
<script>
|
||
document.body.classList.add(localStorage.getItem('tsd-theme') || 'os')
|
||
</script>
|
||
<header>
|
||
<div class="tsd-page-toolbar">
|
||
<div class="container">
|
||
<div class="table-wrap">
|
||
<div class="table-cell" id="tsd-search" data-base=".">
|
||
<div class="field">
|
||
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label
|
||
><input type="text" id="tsd-search-field" />
|
||
</div>
|
||
<ul class="results">
|
||
<li class="state loading">Preparing search index...</li>
|
||
<li class="state failure">The search index is not available</li>
|
||
</ul>
|
||
<a href="index.html" class="title">@supabase/supabase-js</a>
|
||
</div>
|
||
<div class="table-cell" id="tsd-widgets">
|
||
<div id="tsd-filter">
|
||
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
|
||
<div class="tsd-filter-group">
|
||
<div class="tsd-select" id="tsd-filter-visibility">
|
||
<span class="tsd-select-label">All</span>
|
||
<ul class="tsd-select-list">
|
||
<li data-value="public">Public</li>
|
||
<li data-value="protected">Public/Protected</li>
|
||
<li data-value="private" class="selected">All</li>
|
||
</ul>
|
||
</div>
|
||
<input type="checkbox" id="tsd-filter-inherited" checked /><label
|
||
class="tsd-widget"
|
||
for="tsd-filter-inherited"
|
||
>Inherited</label
|
||
><input type="checkbox" id="tsd-filter-externals" checked /><label
|
||
class="tsd-widget"
|
||
for="tsd-filter-externals"
|
||
>Externals</label
|
||
>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tsd-page-title">
|
||
<div class="container"><h1>@supabase/supabase-js</h1></div>
|
||
</div>
|
||
</header>
|
||
<div class="container container-main">
|
||
<div class="row">
|
||
<div class="col-8 col-content">
|
||
<div class="tsd-panel tsd-typography">
|
||
<a href="#supabase-js" id="supabase-js" style="color: inherit; text-decoration: none">
|
||
<h1><code>supabase-js</code></h1>
|
||
</a>
|
||
<p>An isomorphic JavaScript client for Supabase.</p>
|
||
<ul>
|
||
<li>
|
||
<strong>Documentation:</strong>
|
||
<a href="https://supabase.com/docs/client/supabase-client"
|
||
>https://supabase.com/docs/client/supabase-client</a
|
||
>
|
||
</li>
|
||
<li>
|
||
TypeDoc:
|
||
<a href="https://supabase.github.io/supabase-js"
|
||
>https://supabase.github.io/supabase-js</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
|
||
<a href="#usage" id="usage" style="color: inherit; text-decoration: none">
|
||
<h2>Usage</h2>
|
||
</a>
|
||
<p>First of all, you need to install the library:</p>
|
||
<pre><code class="language-sh"><span class="hl-0">npm install @supabase/supabase-js</span>
|
||
</code></pre>
|
||
<p>
|
||
Then you're able to import the library and establish the connection with the
|
||
database:
|
||
</p>
|
||
<pre><code class="language-js"><span class="hl-1">import</span><span class="hl-0"> { </span><span class="hl-2">createClient</span><span class="hl-0"> } </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-3">'@supabase/supabase-js'</span><br/><br/><span class="hl-4">// Create a single supabase client for interacting with your database</span><br/><span class="hl-5">const</span><span class="hl-0"> </span><span class="hl-6">supabase</span><span class="hl-0"> = </span><span class="hl-7">createClient</span><span class="hl-0">(</span><span class="hl-3">'https://xyzcompany.supabase.co'</span><span class="hl-0">, </span><span class="hl-3">'public-anon-key'</span><span class="hl-0">)</span>
|
||
</code></pre>
|
||
|
||
<a href="#umd" id="umd" style="color: inherit; text-decoration: none">
|
||
<h3>UMD</h3>
|
||
</a>
|
||
<p>
|
||
You can now use plain <code><script></code>s to import supabase-js from CDNs,
|
||
like:
|
||
</p>
|
||
<pre><code class="language-html"><span class="hl-8"><</span><span class="hl-9">script</span><span class="hl-10"> </span><span class="hl-11">src</span><span class="hl-10">=</span><span class="hl-12">"https://cdn.jsdelivr.net/npm/@supabase/supabase-js"</span><span class="hl-8">></</span><span class="hl-9">script</span><span class="hl-8">></span>
|
||
</code></pre>
|
||
<p>or even:</p>
|
||
<pre><code class="language-html"><span class="hl-8"><</span><span class="hl-9">script</span><span class="hl-10"> </span><span class="hl-11">src</span><span class="hl-10">=</span><span class="hl-12">"https://unpkg.com/@supabase/supabase-js"</span><span class="hl-8">></</span><span class="hl-9">script</span><span class="hl-8">></span>
|
||
</code></pre>
|
||
<p>Then you can use it from a global <code>supabase</code> variable:</p>
|
||
<pre><code class="language-html"><span class="hl-8"><</span><span class="hl-9">script</span><span class="hl-8">></span><br/><span class="hl-10"> </span><span class="hl-5">const</span><span class="hl-10"> { </span><span class="hl-6">createClient</span><span class="hl-10"> } </span><span class="hl-0">=</span><span class="hl-10"> </span><span class="hl-2">supabase</span><br/><span class="hl-10"> </span><span class="hl-5">const</span><span class="hl-10"> </span><span class="hl-6">_supabase</span><span class="hl-10"> </span><span class="hl-0">=</span><span class="hl-10"> </span><span class="hl-7">createClient</span><span class="hl-10">(</span><span class="hl-3">'https://xyzcompany.supabase.co'</span><span class="hl-10">, </span><span class="hl-3">'public-anon-key'</span><span class="hl-10">)</span><br/><br/><span class="hl-10"> </span><span class="hl-2">console</span><span class="hl-10">.</span><span class="hl-7">log</span><span class="hl-10">(</span><span class="hl-3">'Supabase Instance: '</span><span class="hl-10">, </span><span class="hl-2">_supabase</span><span class="hl-10">)</span><br/><span class="hl-10"> </span><span class="hl-4">// ...</span><br/><span class="hl-8"></</span><span class="hl-9">script</span><span class="hl-8">></span>
|
||
</code></pre>
|
||
|
||
<a href="#esm" id="esm" style="color: inherit; text-decoration: none">
|
||
<h3>ESM</h3>
|
||
</a>
|
||
<p>
|
||
You can now use type="module" <code><script></code>s to import
|
||
supabase-js from CDNs, like:
|
||
</p>
|
||
<pre><code class="language-html"><span class="hl-8"><</span><span class="hl-9">script</span><span class="hl-10"> </span><span class="hl-11">type</span><span class="hl-10">=</span><span class="hl-12">"module"</span><span class="hl-8">></span><br/><span class="hl-10"> </span><span class="hl-1">import</span><span class="hl-10"> { </span><span class="hl-2">createClient</span><span class="hl-10"> } </span><span class="hl-1">from</span><span class="hl-10"> </span><span class="hl-3">'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm'</span><br/><span class="hl-10"> </span><span class="hl-5">const</span><span class="hl-10"> </span><span class="hl-6">supabase</span><span class="hl-10"> </span><span class="hl-0">=</span><span class="hl-10"> </span><span class="hl-7">createClient</span><span class="hl-10">(</span><span class="hl-3">'https://xyzcompany.supabase.co'</span><span class="hl-10">, </span><span class="hl-3">'public-anon-key'</span><span class="hl-10">)</span><br/><br/><span class="hl-10"> </span><span class="hl-2">console</span><span class="hl-10">.</span><span class="hl-7">log</span><span class="hl-10">(</span><span class="hl-3">'Supabase Instance: '</span><span class="hl-10">, </span><span class="hl-2">supabase</span><span class="hl-10">)</span><br/><span class="hl-10"> </span><span class="hl-4">// ...</span><br/><span class="hl-8"></</span><span class="hl-9">script</span><span class="hl-8">></span>
|
||
</code></pre>
|
||
|
||
<a
|
||
href="#custom-fetch-implementation"
|
||
id="custom-fetch-implementation"
|
||
style="color: inherit; text-decoration: none"
|
||
>
|
||
<h3>Custom <code>fetch</code> implementation</h3>
|
||
</a>
|
||
<p>
|
||
<code>supabase-js</code> uses the
|
||
<a href="https://www.npmjs.com/package/cross-fetch"><code>cross-fetch</code></a>
|
||
library to make HTTP requests, but an alternative <code>fetch</code> implementation
|
||
can be provided as an option. This is most useful in environments where
|
||
<code>cross-fetch</code> is not compatible, for instance Cloudflare Workers:
|
||
</p>
|
||
<pre><code class="language-js"><span class="hl-1">import</span><span class="hl-0"> { </span><span class="hl-2">createClient</span><span class="hl-0"> } </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-3">'@supabase/supabase-js'</span><br/><br/><span class="hl-4">// Provide a custom `fetch` implementation as an option</span><br/><span class="hl-5">const</span><span class="hl-0"> </span><span class="hl-6">supabase</span><span class="hl-0"> = </span><span class="hl-7">createClient</span><span class="hl-0">(</span><span class="hl-3">'https://xyzcompany.supabase.co'</span><span class="hl-0">, </span><span class="hl-3">'public-anon-key'</span><span class="hl-0">, {</span><br/><span class="hl-0"> </span><span class="hl-7">fetch</span><span class="hl-2">:</span><span class="hl-0"> (...</span><span class="hl-2">args</span><span class="hl-0">) </span><span class="hl-5">=></span><span class="hl-0"> </span><span class="hl-7">fetch</span><span class="hl-0">(...</span><span class="hl-2">args</span><span class="hl-0">),</span><br/><span class="hl-0">})</span>
|
||
</code></pre>
|
||
|
||
<a href="#sponsors" id="sponsors" style="color: inherit; text-decoration: none">
|
||
<h2>Sponsors</h2>
|
||
</a>
|
||
<p>
|
||
We are building the features of Firebase using enterprise-grade, open source products.
|
||
We support existing communities wherever possible, and if the products don’t exist we
|
||
build them and open source them ourselves. Thanks to these sponsors who are making the
|
||
OSS ecosystem better for everyone.
|
||
</p>
|
||
<p>
|
||
<a href="https://github.com/sponsors/supabase"
|
||
><img
|
||
src="https://user-images.githubusercontent.com/10214025/90518111-e74bbb00-e198-11ea-8f88-c9e3c1aa4b5b.png"
|
||
alt="New Sponsor"
|
||
/></a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
||
<nav class="tsd-navigation primary">
|
||
<ul>
|
||
<li class="current"><a href="modules.html">Modules</a></li>
|
||
<li class="tsd-kind-module"><a href="modules/index.html">index</a></li>
|
||
<li class="tsd-kind-module">
|
||
<a href="modules/lib_SupabaseQueryBuilder.html"
|
||
>lib/<wbr />Supabase<wbr />Query<wbr />Builder</a
|
||
>
|
||
</li>
|
||
<li class="tsd-kind-module">
|
||
<a href="modules/lib_SupabaseRealtimeClient.html"
|
||
>lib/<wbr />Supabase<wbr />Realtime<wbr />Client</a
|
||
>
|
||
</li>
|
||
<li class="tsd-kind-module">
|
||
<a href="modules/lib_constants.html">lib/constants</a>
|
||
</li>
|
||
<li class="tsd-kind-module"><a href="modules/lib_helpers.html">lib/helpers</a></li>
|
||
<li class="tsd-kind-module"><a href="modules/lib_types.html">lib/types</a></li>
|
||
<li class="tsd-kind-module"><a href="modules/lib_version.html">lib/version</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="with-border-bottom">
|
||
<div class="container">
|
||
<h2>Legend</h2>
|
||
<div class="tsd-legend-group">
|
||
<ul class="tsd-legend">
|
||
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
|
||
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
|
||
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
|
||
<li class="tsd-kind-type-alias tsd-has-type-parameter">
|
||
<span class="tsd-kind-icon">Type alias with type parameter</span>
|
||
</li>
|
||
</ul>
|
||
<ul class="tsd-legend">
|
||
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
|
||
<li class="tsd-kind-class tsd-has-type-parameter">
|
||
<span class="tsd-kind-icon">Class with type parameter</span>
|
||
</li>
|
||
</ul>
|
||
<ul class="tsd-legend">
|
||
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
|
||
</ul>
|
||
</div>
|
||
<h2>Settings</h2>
|
||
<p>
|
||
Theme
|
||
<select id="theme">
|
||
<option value="os">OS</option>
|
||
<option value="light">Light</option>
|
||
<option value="dark">Dark</option>
|
||
</select>
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
<div class="container tsd-generator">
|
||
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
|
||
</div>
|
||
<div class="overlay"></div>
|
||
<script src="assets/main.js"></script>
|
||
</body>
|
||
</html>
|