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 完全在客户端进行交互，但是，您将失去利用服务器可以实现的一些性能优势。有关工作示例和代码，请访问此仓库。

服务器端

现在可以在服务器端（在 routeLoader 和 routeAction 中）使用 Supabase 客户端，方法是调用 createServerClient 函数。

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

贡献者

感谢所有帮助改进此文档的贡献者！