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，但是这样可能会失去一些通过利用服务器实现的性能优势。有关工作示例和代码，请访问此存储库。

服务器端

现在可以在服务器端使用 Supabase 客户端 - 在 routeLoader 和 routeAction 中 - 通过调用 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 };
});

Contributors

Thanks to all the contributors who have helped make this documentation better!