Erstellen produktionstauglicher Webanwendungen mit Supabase – Teil 1

(Dieser Beitrag wurde ursprünglich auf Baby Programmer veröffentlicht)

Ich arbeite gerade an David Lorenz‘ Buch „Building Production-Grade Web Applications with Supabase“ (Affiliate-Link) und habe gerade Kapitel 2 „Setup Supabase with Next.js“ abgeschlossen. Ich bin auf ein paar Probleme gestoßen und dachte, ich teile sie mit und erkläre, wie ich sie behoben habe.

Abschnitt: Initialisieren und Testen des Basis-Supabase-JavaScript-Clients in Next.js

Fehler: Das Parsen des Ecmascript-Quellcodes ist fehlgeschlagen

Man wird angewiesen, den folgenden Code zu verwenden, um nach Supabase-Buckets zu suchen:

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

Leider führt dies zu folgendem Fehler:

 ⨯ ./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 '}'

Glücklicherweise ist die Lösung recht einfach: Fügen Sie unmittelbar nach .then((result) => :
eine öffnende Klammer hinzu

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

Fehler: ReferenceError: useEffect ist nicht definiert

Sobald der obige Fehler behoben wurde, gehen wir zum nächsten über:

⨯ 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'
}

Das Problem ist, dass wir useEffect nicht aus React zur Verwendung auf dieser Seite importiert haben. Dies ist ganz einfach: Fügen Sie unmittelbar nach dem Import für Image:
einen Import für useEffect hinzu

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

Fehler: Die Ecmascript-Datei hatte einen Fehler

Sie werden sofort mit einem weiteren Fehler begrüßt:

⨯ ./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

Zum Glück ist die Lösung wieder einmal ganz einfach. Fügen Sie oben in der Datei „Client verwenden“ hinzu. etwa so:

"use client";

import Image from "next/image";

Abschnitt: Verwendung des Supabase-Clients mit Pages Router und App Router

Unterabschnitt: Verwendung von createBrowserClient im Frontend

Das erste Problem, auf das wir stoßen, ist nicht wirklich ein Fehler, sondern eher, dass einige der Anweisungen für einige Leser möglicherweise nicht ganz klar sind. Der Leser wird angewiesen, die Funktion „createSupabaseClient“ zu aktualisieren, um createBrowserClient wie folgt zu verwenden:

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

Wo das ... ist, sollte man nicht im wahrsten Sinne des Wortes platzieren ..., sondern man sollte die Inhalte einfügen, die zuvor innerhalb von createClient() waren, z.B. Der endgültige Code sollte wie folgt aussehen:

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

Wir werden dann angewiesen, zwei relativ kleine Anpassungen an der client.js-Datei vorzunehmen:

Wir benennen die Datei von client.js in browserClient.js um

Wir benennen createSupabaseClient in getSupabaseBrowserClient um

Aber das bedeutet für uns einige zusätzliche Arbeit, es sei denn, Ihr Redakteur übernimmt die Änderungen und korrigiert sie automatisch:

Zuerst müssen wir unseren Import in page.js aktualisieren:

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

Als nächstes müssen wir unsere Instanziierung des Clients in page.js aktualisieren:

const supabase = getSupabaseBrowserClient();

Uns wird Folgendes gesagt:

„In VS Code können Sie F2 drücken, um createSupabaseClient umzubenennen. Es wird automatisch im gesamten Projekt umbenannt. Wenn Sie einen Dateinamen ändern, sollte VS Code auch die Referenzen übernehmen und den Pfad in anderen Dateien entsprechend umgestalten.“

(Ich habe den Cursor verwendet und die Änderungen wurden nicht übernommen...könnte in diesem Fall sicherlich die Verbindung zwischen dem Stuhl und der Tastatur gewesen sein)

Unterabschnitt: Verwendung von createServerClient im Backend

Dieser Abschnitt ist ziemlich lang und etwas verwirrend, wie Lorenz zugibt.

Es gibt einen Codeblock, der besonders verwirrend ist:

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

Auf den ersten Blick kann es so aussehen, als würden wir denselben Schritt zweimal ausführen. Es kann leicht übersehen werden, dass die erste Instanz die Anforderungscookies ändert, während die zweite Instanz die Antwortcookies ändert.

Der Rest

Ich habe den Abschnitt über die Verwendung von createServerClient mit dem Pages Router übersprungen. Ich arbeite im Moment an einem Greenfield-Projekt. Wenn ich mit Next.js unter Verwendung des Pages Routers arbeiten muss, kann ich jederzeit noch einmal vorbeischauen.

Der Abschnitt zum direkten Herstellen einer Verbindung zur Datenbank ist ziemlich einfach. Wenn Sie mit SQL-Datenbanken vertraut sind, macht er intuitiv Sinn.

Im Abschnitt zur Verwendung von TypeScript geht es hauptsächlich um die Ausführung eines einzelnen Befehls, um Typdefinitionen zu generieren (und dann bei Bedarf neu zu generieren).

Das Kapitel endet mit grundlegenden Beispielen für die Erstellung eines Clients für Nuxt 3 (Vue) und Python.

Das Ende

Und das ist das Fazit von Kapitel 2. War dieser Beitrag nicht einfach spannend?

Das obige ist der detaillierte Inhalt vonErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!