使用 Supabase 构建生产级 Web 应用程序 - 第 1 部分-js教程-PHP中文网

Building Production-Grade Web Applications with Supabase – Part 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。