Supabase

Supabase JS ライブラリは、routeLoader$、routeAction$、server$などの Qwik のサーバーサイド API とスムーズに連携します。

最初に、Qwik プロジェクトに supabase をインストールします。

npm install @supabase/supabase-js supabase-auth-helpers-qwik

2 番目のステップは、PUBLIC_SUPABASE_URL と PUBLIC_SUPABASE_ANON_KEY 環境変数を .env ファイルに追加することです。「anon」キーはクライアントサイドで公開しても安全です。

PUBLIC_SUPABASE_URL=https://xxxxxxx.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJhb.......

これらの値は Supabase ダッシュボードから取得できます。プロジェクトのルートに新しい .env.local ファイルを作成し、そこに貼り付けます。

注：Supabase を完全にクライアントサイドで Qwik と使用することもできますが、サーバーを活用することで得られるパフォーマンス上の利点の一部を失います。動作例とコードについては、このリポジトリを参照してください。

サーバーサイド

Supabase クライアントは、createServerClient 関数を呼び出すことで、サーバーサイド（routeLoader と routeAction 内）で使用できるようになりました。

import { routeLoader$ } from '@builder.io/qwik-city';
import { createServerClient } from 'supabase-auth-helpers-qwik';
 
export const useDBTest = routeLoader$(async (requestEv) => {
  const supabaseClient = createServerClient(
    requestEv.env.get("PUBLIC_SUPABASE_URL")!,
    requestEv.env.get("PUBLIC_SUPABASE_ANON_KEY")!,
    requestEv
  );
  const { data } = await supabaseClient.from('test').select('*')
  return { data };
});

貢献者

このドキュメントの改善に貢献してくれたすべての貢献者に感謝します！