Supabase

Supabase JS 程式庫與 Qwik 的伺服器端 API（例如 routeLoader$、routeAction$ 或 server$）完美配合。

首先，在您的 Qwik 專案中安裝 Supabase

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

第二步是將 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 完全在客戶端進行操作，但是，您將失去一些可以透過利用伺服器實現的效能優勢。如需工作範例和程式碼，請前往此儲存庫。

伺服器端

現在，透過呼叫 createServerClient 函數，可以在伺服器端（在 routeLoader 和 routeAction 中）使用 Supabase 客戶端。

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 };
});

貢獻者

感謝所有幫助改進此文件的貢獻者！