使用 Supabase 构建生产级 Web 应用程序 - 第 1 部分

（这篇文章最初发表在宝贝程序员）

我正在阅读 David Lorenz 的书《使用 Supabase 构建生产级 Web 应用程序》（附属链接），并且刚刚完成第 2 章 - 使用 Next.js 设置 Supabase。我遇到了一些问题，我想分享一下这些问题以及我是如何解决这些问题的。

部分：在 Next.js 中初始化和测试基本 Supabase JavaScript 客户端

错误：解析 ecmascript 源代码失败

指示使用以下代码来检查 Supabase 存储桶：

useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) =>
     console.log("Bucket List", result);
    });
}, []);

不幸的是，这将导致以下错误：

 ⨯ ./src/app/page.js:9:5
 Parsing ecmascript source code failed
   7 |     supabase.storage.listBuckets().then((result) =>
   8 |       console.log("Bucket List", result)
 > 9 |     });
     |     ^
  10 |   }, []);
  11 |
  12 |   return (

Expected ',', got '}'

幸运的是，修复非常简单，只需在 .then((result) => :
之后添加一个左大括号即可

  useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) => {
      console.log("Bucket List", result)
    });
  }, []);

错误：ReferenceError：useEffect 未定义

解决上述错误后，我们将进行下一个错误：

⨯ ReferenceError: useEffect is not defined
    at Home (src/app/page.js:5:2)
  3 |
  4 | export default function Home() {
> 5 |   useEffect(() => {
    |  ^
  6 |     const supabase = createSupabaseClient();
  7 |     supabase.storage.listBuckets().then((result) => {
  8 |       console.log("Bucket List", result) {
  digest: '3325505329'
}

问题是我们还没有从 React 导入 useEffect 来在这个页面上使用。这样做很简单，在导入 Image 之后立即添加 useEffect 的导入：

import Image from "next/image";
import { useEffect } from "react";
import { createSupabaseClient } from "@/supabase-utils/client";

错误：Ecmascript 文件有错误

您将立即收到另一个错误：

⨯ ./src/app/page.js:2:10
Ecmascript file had an error
  1 | import Image from "next/image";
> 2 | import { useEffect } from "react";
    |          ^^^^^^^^^
  3 | import { createSupabaseClient } from '@/supabase-utils/client';
  4 |
  5 | export default function Home() {

You're importing a component that needs `useEffect`. This React hook only works in a client component. To fix, mark the file (or its parent) with the `"use client"` directive.

 Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

幸运的是，解决方案又非常简单。在文件顶部添加“使用客户端”；像这样：

"use client";

import Image from "next/image";

部分：将 Supabase 客户端与 Pages Router 和 App Router 结合使用

小节：在前端使用 createBrowserClient

我们遇到的第一个问题并不是真正的错误，更多的是一些说明对于某些读者来说可能并不完全清楚。指示读者更新 createSupabaseClient 函数以使用 createBrowserClient，如下所示：

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () => createBrowserClient(...);

其中...不应该从字面上放置...，而是应该插入之前在 createClient() 中的内容，例如最终代码应如下所示：

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () =>
    createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    );

然后我们被指示对 client.js 文件进行两个相对较小的调整：

我们将文件从 client.js 重命名为 browserClient.js

我们将 createSupabaseClient 重命名为 getSupabaseBrowserClient

但这会给我们带来一些额外的工作，除非您的编辑器接受并自动更正更改：

首先，我们需要更新 page.js 中的导入：

import { getSupabaseBrowserClient } from "@/supabase-utils/browserClient";

接下来，我们需要在 page.js 中更新客户端的实例化：

const supabase = getSupabaseBrowserClient();

我们被告知：

“在 VS Code 中，您可以按 F2 重命名 createSupabaseClient。它将在您的项目中自动重命名。如果您更改文件名，VS Code 还应该获取引用并相应地重构其他文件中的路径。”

（我使用的是光标，但没有看到更改...在这种情况下肯定是椅子和键盘之间的连接）

小节：在后端使用 createServerClient

正如 Lorenz 承认的那样，这部分相当长并且有点令人困惑。

有一段代码特别令人困惑：

useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) =>
     console.log("Bucket List", result);
    });
}, []);

乍一看，我们似乎将同一步骤执行了两次。很容易忽视第一个实例正在修改请求 cookie，而第二个实例正在修改响应 cookie。

其余的部分

我跳过了有关将 createServerClient 与 Pages Router 一起使用的部分，我目前正在开发一个新项目，如果我需要使用 Pages Router 来处理 Next.js，我可以随时重新访问。

直接连接到数据库的部分是相当基础的，如果您熟悉 SQL 数据库，那么它就很直观。

有关使用 TypeScript 的部分主要是关于运行单个命令来生成（然后根据需要重新生成）类型定义。

本章以为 Nuxt 3 (Vue) 和 Python 创建客户端的基本示例结束。

结局

这就是第二章的结论。那篇文章是不是很扣人心弦？

以上是使用 Supabase 构建生产级 Web 应用程序 - 第 1 部分的详细内容。更多信息请关注PHP中文网其他相关文章！