Eigene Kommentare mit Gatsby und FaunaDB erstellen

Wenn Sie Gatsby noch nie verwendet haben, lesen Sie, warum es in jeder Hinsicht schnell ist, und wenn Sie FaunaDB noch nie verwendet haben, erwartet Sie ein Leckerbissen. Wenn Sie statische Websites in vollwertige Jamstack-Anwendungen verwandeln möchten, ist dies die Backend-Lösung für Sie!

Dieses Tutorial konzentriert sich nur auf die Operationen, die Sie benötigen, um FaunaDB zur Stromversorgung eines Kommentarsystems für einen Gatsby-Blog zu verwenden. Die App verfügt über Eingabefelder, mit denen Benutzer Ihre Beiträge kommentieren können, und einen Admin-Bereich, in dem Sie Kommentare genehmigen oder löschen können, bevor sie auf jedem Beitrag erscheinen. Die Authentifizierung erfolgt über das Identity-Widget von Netlify, und alles wird mithilfe von Netlify Serverless Functions und einer Apollo/GraphQL-API zusammengefügt, die Daten an eine FaunaDB-Datenbanksammlung sendet.

Ich habe FaunaDB aus mehreren Gründen als Datenbank gewählt. Erstens gibt es eine sehr großzügige kostenlose Stufe! Perfekt für kleine Projekte, die ein Backend benötigen, es gibt native Unterstützung für GraphQL-Abfragen und es verfügt über wirklich leistungsstarke Indizierungsfunktionen!

…und um die Ersteller zu zitieren;

Unabhängig davon, welchen Stack Sie verwenden oder wo Sie Ihre App bereitstellen, bietet Ihnen FaunaDB mühelosen, latenzarmen und zuverlässigen Zugriff auf Ihre Daten über vertraute APIs.

Die fertige Kommentar-App können Sie hier sehen.

Los geht's

Um zu beginnen, klonen Sie das Repository unter https://github.com/PaulieScanlon/fauna-gatsby-comments

oder

git clone https://github.com/PaulieScanlon/fauna-gatsby-comments.git

Installieren Sie dann alle Abhängigkeiten

npm install

Wechseln Sie außerdem mit cd in das Verzeichnis functions/apollo-graphql und installieren Sie die Abhängigkeiten für die Netlify-Funktion

npm install

Dies ist ein separates Paket und hat eigene Abhängigkeiten, die Sie später verwenden werden.

Wir müssen auch die Netlify CLI installieren, da Sie diese später ebenfalls verwenden werden

npm install netlify-cli -g

Lassen Sie uns nun drei neue Dateien hinzufügen, die nicht Teil des Repositories sind.

Erstellen Sie am Stammverzeichnis Ihres Projekts eine Datei .env, .env.development und .env.production.

Fügen Sie Folgendes zu .env hinzu

GATSBY_FAUNA_DB =
GATSBY_FAUNA_COLLECTION =

Fügen Sie Folgendes zu .env.development hinzu

GATSBY_FAUNA_DB =
GATSBY_FAUNA_COLLECTION =
GATSBY_SHOW_SIGN_UP = true
GATSBY_ADMIN_ID =

Fügen Sie Folgendes zu .env.production hinzu

GATSBY_FAUNA_DB =
GATSBY_FAUNA_COLLECTION =
GATSBY_SHOW_SIGN_UP = false
GATSBY_ADMIN_ID =

Sie werden später zu diesen zurückkehren, aber für den Fall, dass Sie sich fragen;

• GATSBY_FAUNA_DB ist der geheime FaunaDB-Schlüssel für Ihre Datenbank
• GATSBY_FAUNA_COLLECTION ist der Name der FaunaDB-Sammlung
• GATSBY_SHOW_SIGN_UP wird verwendet, um die Schaltfläche "Registrieren" zu verbergen, wenn sich die Website in der Produktionsumgebung befindet
• GATSBY_ADMIN_ID ist eine Benutzer-ID, die Netlify Identity für Sie generiert

Wenn Sie neugierig sind, können Sie die App testen, indem Sie gatsby develop oder yarn develop ausführen und dann zu https://:8000 in Ihrem Browser navigieren.

FaunaDB

Legen wir also los, aber bevor wir Operationen schreiben, gehen Sie zu https://fauna.com/ und registrieren Sie sich!

Datenbank und Sammlung

• Erstellen Sie eine neue Datenbank, indem Sie auf NEUE DATENBANK klicken.
• Nennen Sie die Datenbank: Ich habe die Demo-Datenbank fauna-gatsby-comments genannt.
• Erstellen Sie eine neue Sammlung, indem Sie auf NEUE SAMMLUNG klicken.
• Nennen Sie die Sammlung: Ich habe die Demo-Sammlung demo-blog-comments genannt.

Server-Schlüssel

Nun müssen Sie einen Server-Schlüssel einrichten. Gehen Sie zu SICHERHEIT.

• Erstellen Sie einen neuen Schlüssel, indem Sie auf NEUER SCHLÜSSEL klicken.
• Wählen Sie die Datenbank aus, für die der Schlüssel gelten soll, z. B. fauna-gatsby-comments.
• Stellen Sie die Rolle auf Admin.
• Nennen Sie den Server-Schlüssel: Ich habe den Demo-Schlüssel demo-blog-server-key genannt.

Umgebungsvariablen Teil 1

Kopieren Sie den Server-Schlüssel und fügen Sie ihn in GATSBY_FAUNA_DB in .env.development, .env.production und .env ein.

Sie müssen auch den Namen der Sammlung zu GATSBY_FAUNA_COLLECTION in .env.development, .env.production und .env hinzufügen.

Das Hinzufügen dieser Werte zu .env dient nur dazu, Ihre Entwicklungsumgebung für FaunaDB-Operationen zu testen, was Sie als Nächstes tun werden.

Beginnen wir mit der Erstellung eines Kommentars. Gehen Sie dazu zurück zu boop.js.

// boop.js
...
// CREATE COMMENT
createComment: async () => {
  const slug = "/posts/some-post"
  const name = "some name"
  const comment = "some comment"
  const results = await client.query(
    q.Create(q.Collection(COLLECTION_NAME), {
      data: {
        isApproved: false,
        slug: slug,
        date: new Date().toString(),
        name: name,
        comment: comment,
      },
    })
  )
  console.log(JSON.stringify(results, null, 2))
  return {
    commentId: results.ref.id,
  }
},
...

Die Aufschlüsselung dieser Funktion ist wie folgt;

• q ist die Instanz von faunadb.query.
• Create ist die FaunaDB-Methode zum Erstellen eines Eintrags in einer Sammlung.
• Collection ist der Bereich in der Datenbank, in dem die Daten gespeichert werden. Er nimmt den Namen der Sammlung als erstes Argument und ein Datenobjekt als zweites.

Das zweite Argument ist die Struktur der Daten, die Sie für das Kommentarsystem der Anwendung benötigen.

Vorerst werden Sie slug, name und comment hartkodieren, aber in der endgültigen App werden diese Werte vom Eingabeformular auf der Beitragsseite erfasst und über Argumente übergeben.

Die Aufschlüsselung der Struktur ist wie folgt;

• isApproved ist der Status des Kommentars und standardmäßig false, bis wir ihn auf der Admin-Seite genehmigen.
• slug ist der Pfad zum Beitrag, bei dem der Kommentar geschrieben wurde.
• date ist der Zeitstempel, zu dem der Kommentar geschrieben wurde.
• name ist der Name, den der Benutzer in das Kommentarformular eingegeben hat.
• comment ist der Kommentar, den der Benutzer in das Kommentarformular eingegeben hat.

Wenn Sie (oder ein Benutzer) einen Kommentar erstellen, sind Sie nicht wirklich daran interessiert, die Antwort zu verarbeiten, da der Benutzer nur eine Erfolgs- oder Fehlermeldung sieht.

Nachdem ein Benutzer einen Kommentar veröffentlicht hat, wird dieser in Ihrer Admin-Warteschlange angezeigt, bis Sie ihn genehmigen. Wenn Sie jedoch etwas zurückgeben möchten, könnten Sie dies in der Benutzeroberfläche anzeigen, indem Sie etwas aus der createComment -Funktion zurückgeben.

Kommentar erstellen

Wenn Sie slug, name und comment hartkodiert haben, können Sie nun Folgendes in Ihrer CLI ausführen:

node boop createComment

Wenn alles korrekt funktioniert hat, sollten Sie in Ihrem Terminal ein Protokoll des neuen Kommentars sehen.

{
   "ref": {
     "@ref": {
       "id": "263413122555970050",
       "collection": {
         "@ref": {
           "id": "demo-blog-comments",
           "collection": {
             "@ref": {
               "id": "collections"
             }
           }
         }
       }
     }
   },
   "ts": 1587469179600000,
   "data": {
     "isApproved": false,
     "slug": "/posts/some-post",
     "date": "Tue Apr 21 2020 12:39:39 GMT+0100 (British Summer Time)",
     "name": "some name",
     "comment": "some comment"
   }
 }
 { commentId: '263413122555970050' }

Wenn Sie in FaunaDB zu SAMMLUNGEN wechseln, sollten Sie Ihren neuen Eintrag in der Sammlung sehen.

Sie müssen während der Entwicklung noch ein paar Kommentare erstellen. Ändern Sie dazu die hartkodierten Werte für name und comment und führen Sie Folgendes erneut aus.

node boop createComment

Tun Sie dies ein paar Mal, damit Sie am Ende mindestens drei neue Kommentare in der Datenbank haben. Sie werden diese gleich verwenden.

Kommentar nach ID löschen

Nachdem Sie nun Kommentare erstellen können, müssen Sie auch in der Lage sein, einen Kommentar zu löschen.

Indem Sie die commentId eines der oben erstellten Kommentare hinzufügen, können Sie ihn aus der Datenbank löschen. Die commentId ist die id im ref.@ref -Objekt.

Auch hier interessiert Sie der Rückgabewert nicht wirklich, aber wenn Sie ihn in der Benutzeroberfläche anzeigen möchten, könnten Sie dies tun, indem Sie etwas aus der deleteCommentById -Funktion zurückgeben.

// boop.js
...
// DELETE COMMENT
deleteCommentById: async () => {
  const commentId = "263413122555970050";
  const results = await client.query(
    q.Delete(q.Ref(q.Collection(COLLECTION_NAME), commentId))
  );
  console.log(JSON.stringify(results, null, 2));
  return {
    commentId: results.ref.id,
  };
},
...

Die Aufschlüsselung dieser Funktion ist wie folgt:

• client ist die FaunaDB-Client-Instanz.
• query ist eine Methode zum Abrufen von Daten von FaunaDB.
• q ist die Instanz von faunadb.query.
• Delete ist die FaunaDB-Löschmethode zum Löschen von Einträgen aus einer Sammlung.
• Ref ist die eindeutige FaunaDB-Referenz zur Identifizierung des Eintrags.
• Collection ist der Bereich in der Datenbank, in dem die Daten gespeichert werden.

Wenn Sie eine commentId hartkodiert haben, können Sie nun Folgendes in Ihrer CLI ausführen:

node boop deleteCommentById

Wenn Sie in FaunaDB zurück zu SAMMLUNGEN wechseln, sollten Sie sehen, dass dieser Eintrag nicht mehr in der Sammlung vorhanden ist.

Indizes

Als Nächstes erstellen Sie einen INDEX in FaunaDB.

Ein INDEX ermöglicht es Ihnen, die Datenbank mit einem bestimmten Begriff abzufragen und eine bestimmte Datenstruktur für die Rückgabe zu definieren.

Bei der Arbeit mit GraphQL und/oder TypeScript ist dies sehr leistungsfähig, da Sie FaunaDB-Indizes verwenden können, um nur die Daten zurückzugeben, die Sie benötigen, und zwar in einer vorhersagbaren Form. Dies macht die Typisierung von Antworten in GraphQL und/oder TypeScript zum Kinderspiel… Ich habe an einer Reihe von Anwendungen gearbeitet, die nur ein riesiges Objekt mit nutzlosen Werten zurückgeben, was zwangsläufig zu Fehlern in Ihrer App führt. Igitt!

• Gehen Sie zu INDEXES und klicken Sie auf NEUER INDEX.
• Nennen Sie den Index: Ich habe diesen get-all-comments genannt.
• Stellen Sie als Quellsammlung den Namen der zuvor eingerichteten Sammlung ein.

Wie oben erwähnt, können Sie bei der Abfrage der Datenbank mit diesem Index angeben, welche Teile des Eintrags zurückgegeben werden sollen.

Sie können dies tun, indem Sie „Werte“ hinzufügen, aber achten Sie darauf, die Werte genau wie unten einzugeben, da Sie diese (in der kostenlosen Stufe von FaunaDB) nach der Erstellung nicht mehr ändern können. Wenn also ein Fehler vorliegt, müssen Sie den Index löschen und neu beginnen… Mist!

Die Werte, die Sie hinzufügen müssen, sind wie folgt:

• ref
• data.isApproved
• data.slug
• data.date
• data.name
• data.comment

Nachdem Sie alle Werte hinzugefügt haben, können Sie auf SPEICHERN klicken.

Alle Kommentare abrufen

// boop.js
...
// GET ALL COMMENTS
getAllComments: async () => {
   const results = await client.query(
     q.Paginate(q.Match(q.Index("get-all-comments")))
   );
   console.log(JSON.stringify(results, null, 2));
   return results.data.map(([ref, isApproved, slug, date, name, comment]) => ({
     commentId: ref.id,
     isApproved,
     slug,
     date,
     name,
     comment,
   }));
 },
...

Die Aufschlüsselung dieser Funktion ist wie folgt:

• client ist die FaunaDB-Client-Instanz.
• query ist eine Methode zum Abrufen von Daten von FaunaDB.
• q ist die Instanz von faunadb.query.
• Paginate paginiert die Ergebnisse.
• Match gibt übereinstimmende Ergebnisse zurück.
• Index ist der Name des gerade erstellten Index.

Die Struktur des zurückgegebenen Ergebnisses ist ein Array mit derselben Struktur, die Sie in den Index -„Werten“ definiert haben.

Wenn Sie Folgendes ausführen, sollten Sie die Liste aller zuvor erstellten Kommentare sehen.

node boop getAllComments

Kommentare nach Slug abrufen

Sie gehen ähnlich wie oben vor, aber dieses Mal erstellen Sie einen neuen Index, der es Ihnen ermöglicht, FaunaDB auf eine andere Weise abzufragen. Der Hauptunterschied besteht darin, dass Sie FaunaDB beim get-comments-by-slug über diesen bestimmten Begriff informieren müssen, und dies können Sie tun, indem Sie data.slug zum Terms-Feld hinzufügen.

• Gehen Sie zu INDEX und klicken Sie auf NEUER INDEX.
• Nennen Sie den Index, ich habe diesen get-comments-by-slug genannt.
• Stellen Sie als Quellsammlung den Namen der zuvor eingerichteten Sammlung ein.
• Fügen Sie data.slug in das Feld Terms ein.

Die Werte, die Sie hinzufügen müssen, sind wie folgt:

• ref
• data.isApproved
• data.slug
• data.date
• data.name
• data.comment

Nachdem Sie alle Werte hinzugefügt haben, können Sie auf SPEICHERN klicken.

// boop.js
...
// GET COMMENT BY SLUG
getCommentsBySlug: async () => {
  const slug = "/posts/some-post";
  const results = await client.query(
    q.Paginate(q.Match(q.Index("get-comments-by-slug"), slug))
  );
  console.log(JSON.stringify(results, null, 2));
  return results.data.map(([ref, isApproved, slug, date, name, comment]) => ({
    commentId: ref.id,
    isApproved,
    slug,
    date,
    name,
    comment,
  }));
},
...

Die Aufschlüsselung dieser Funktion ist wie folgt:

• client ist die FaunaDB-Client-Instanz.
• query ist eine Methode zum Abrufen von Daten von FaunaDB.
• q ist die Instanz von faunadb.query.
• Paginate paginiert die Ergebnisse.
• Match gibt übereinstimmende Ergebnisse zurück.
• Index ist der Name des gerade erstellten Index.

Die Struktur des zurückgegebenen Ergebnisses ist ein Array mit derselben Struktur, die Sie in den Index -„Werten“ definiert haben. Sie können diese Struktur auf die gleiche Weise erstellen wie oben und unbedingt einen Wert für Terms hinzufügen. Achten Sie auch hier darauf, diese sorgfältig einzugeben.

Wenn Sie Folgendes ausführen, sollten Sie die Liste aller zuvor erstellten Kommentare sehen, aber für einen bestimmten slug.

node boop getCommentsBySlug

Kommentar nach ID genehmigen

Beim Erstellen eines Kommentars setzen Sie den Wert isApproved manuell auf false. Dies verhindert, dass Kommentare in der App angezeigt werden, bis Sie sie genehmigen.

Sie müssen nun eine Funktion dafür erstellen, aber Sie müssen eine commentId hartkodieren. Verwenden Sie eine commentId eines der zuvor erstellten Kommentare.

// boop.js
...
// APPROVE COMMENT BY ID
approveCommentById: async () => {
  const commentId = '263413122555970050'
  const results = await client.query(
    q.Update(q.Ref(q.Collection(COLLECTION_NAME), commentId), {
      data: {
        isApproved: true,
      },
    })
  );
  console.log(JSON.stringify(results, null, 2));
  return {
    isApproved: results.isApproved,
  };
},
...

Die Aufschlüsselung dieser Funktion ist wie folgt:

• client ist die FaunaDB-Client-Instanz.
• query ist eine Methode zum Abrufen von Daten von FaunaDB.
• q ist die Instanz von faunadb.query.
• Update ist die FaunaDB-Methode zum Aktualisieren eines Eintrags.
• Ref ist die eindeutige FaunaDB-Referenz zur Identifizierung des Eintrags.
• Collection ist der Bereich in der Datenbank, in dem die Daten gespeichert werden.

Wenn Sie eine commentId hartkodiert haben, können Sie nun Folgendes in Ihrer CLI ausführen:

node boop approveCommentById

Wenn Sie getCommentsBySlug erneut ausführen, sollten Sie nun sehen, dass sich der isApproved -Status des Eintrags, für den Sie die commentId hartkodiert haben, zu true geändert hat.

node boop getCommentsBySlug

Dies sind alle Operationen, die für die Verwaltung der Daten aus der App erforderlich sind.

Im Repository finden Sie in apollo-graphql.js in functions/apollo-graphql alle oben genannten Operationen. Wie bereits erwähnt, werden die hartkodierten Werte durch args ersetzt, dies sind die Werte, die von verschiedenen Teilen der App übergeben werden.

Netlify

Angenommen, Sie haben den Netlify-Registrierungsprozess abgeschlossen oder bereits ein Konto bei Netlify, können Sie nun die Demo-App auf Ihr GitHub-Konto hochladen.

Dazu müssen Sie Git lokal initialisiert, ein Remote-Repository hinzugefügt und das Demo-Repository nach oben gepusht haben, bevor Sie fortfahren.

Sie sollten nun in der Lage sein, das Repository mit Netlify’s Continuous Deployment zu verknüpfen.

Wenn Sie auf der Netlify-Dashboard-Schaltfläche „Neue Website von Git“ klicken, können Sie den Zugriff auf Ihr GitHub-Konto autorisieren und das Repository gatsby-fauna-comments auswählen, um Netlify’s Continuous Deployment zu aktivieren. Sie müssen mindestens einmal bereitgestellt haben, damit wir eine öffentliche URL Ihrer App haben.

Die URL sieht etwa so aus: https://ecstatic-lewin-b1bd17.netlify.app, aber Sie können sie gerne umbenennen und die URL notieren, da Sie sie für den Netlify Identity-Schritt, der bald erwähnt wird, benötigen.

Umgebungsvariablen Teil 2

In einem früheren Schritt haben Sie den geheimen FaunaDB-Datenbankschlüssel und den Sammlungsnamen zu Ihren .env -Dateien hinzugefügt. Sie müssen dies auch zu den Umgebungsvariablen von Netlify hinzufügen.

• Navigieren Sie über die Netlify-Navigation zu Einstellungen.
• Klicken Sie auf Build und deploy.
• Wählen Sie entweder Environment oder scrollen Sie nach unten, bis Sie Environment variables sehen.
• Klicken Sie auf Variablen bearbeiten.

Fahren Sie mit dem Hinzufügen der folgenden hinzu.

GATSBY_SHOW_SIGN_UP = false
GATSBY_FAUNA_DB = you FaunaDB secret key
GATSBY_FAUNA_COLLECTION = you FaunaDB collection name

Während Sie dabei sind, müssen Sie auch die Richtlinie für sensible Variablen ändern und Ohne Einschränkungen bereitstellen auswählen.

Netlify Identity Widget

Ich habe bereits erwähnt, dass beim Erstellen eines Kommentars der Wert isApproved auf false gesetzt wird. Dies verhindert, dass Kommentare auf Blog-Posts angezeigt werden, bis Sie sie (der Admin) genehmigt haben. Um Admin zu werden, müssen Sie eine Identität erstellen.

Dies können Sie mit dem Netlify Identity Widget erreichen.

Wenn Sie den Schritt Continuous Deployment oben abgeschlossen haben, können Sie von der Netlify-Navigation zur Identitätsseite navigieren.

Sie werden hier noch keine Benutzer sehen, also nutzen wir die App, um die Verbindung herzustellen, aber bevor Sie das tun, klicken Sie auf Identität aktivieren.

Bevor Sie fortfahren, möchte ich darauf hinweisen, dass Sie von nun an netlify dev anstelle von gatsby develop oder yarn develop verwenden werden. Dies liegt daran, dass Sie einige „spezielle“ Netlify-Methoden in der App verwenden werden, und das Starten des Servers mit netlify dev ist erforderlich, um verschiedene Prozesse zu starten, die Sie verwenden werden.

• Starten Sie die App mit netlify dev.
• Navigieren Sie zu https://:8888/admin/.
• Klicken Sie in der Kopfzeile auf die Schaltfläche Anmelden.

Sie müssen auch das Netlify Identity Widget auf Ihre neu bereitgestellte App-URL verweisen. Das war die URL, die ich erwähnt habe, dass Sie sie sich notieren müssen. Wenn Sie Ihre App noch nicht umbenannt haben, sieht sie ungefähr so aus: https://ecstatic-lewin-b1bd17.netlify.app/. Im Popup-Fenster wird eine Eingabeaufforderung angezeigt, um die URL der Website festzulegen.

Sie können nun die erforderlichen Anmeldeschritte abschließen.

Nach der Anmeldung erhalten Sie eine E-Mail, in der Sie aufgefordert werden, Ihre Identität zu bestätigen. Sobald dies abgeschlossen ist, aktualisieren Sie die Identitätsseite in Netlify und Sie sollten sich selbst als Benutzer sehen.

Jetzt ist es Zeit zum Einloggen, aber bevor Sie das tun, suchen Sie Identity.js in src/components und kommentieren Sie vorübergehend die console.log() in Zeile 14 aus. Dies gibt das Netlify Identity-Benutzerobjekt in der Konsole aus.

• Starten Sie Ihren lokalen Server neu.
• Starten Sie die App erneut mit netlify dev.
• Klicken Sie in der Kopfzeile auf die Schaltfläche Anmelden.

Wenn dies alles funktioniert, sollten Sie eine Konsolenausgabe für netlifyIdentity.currentUser: sehen. Suchen Sie den id -Schlüssel und kopieren Sie den Wert.

Setzen Sie diesen als Wert für GATSBY_ADMIN_ID = sowohl in .env.production als auch in .env.development.

Sie können nun die console.log() in Zeile 14 in Identity.js sicher entfernen oder wieder auskommentieren.

GATSBY_ADMIN_ID = your Netlify Identity user id

…und schließlich

• Starten Sie Ihren lokalen Server neu.
• Starten Sie die App erneut mit netlify dev.

Jetzt sollten Sie sich als „Admin“ anmelden können… Hurra!

Navigieren Sie zu https://:8888/admin/ und melden Sie sich an.

Es ist wichtig zu beachten, dass Sie jetzt localhost:8888 für die Entwicklung und NICHT localhost:8000 verwenden werden, was bei der Gatsby-Entwicklung üblicher ist.

Bevor Sie dies in der bereitgestellten Umgebung testen, stellen Sie sicher, dass Sie in den Umgebungsvariablen von Netlify die id Ihres Netlify Identity-Benutzers zu den Umgebungsvariablen hinzufügen!

• Navigieren Sie über die Netlify-Navigation zu Einstellungen.
• Klicken Sie auf Build und deploy.
• Wählen Sie entweder Environment oder scrollen Sie nach unten, bis Sie Environment variables sehen.
• Klicken Sie auf Variablen bearbeiten.

Fahren Sie mit dem Hinzufügen der folgenden hinzu.

GATSBY_ADMIN_ID = your Netlify Identity user id

Wenn Sie die App ausprobieren und ein paar Kommentare zu jedem Beitrag eingeben und dann zurück zur Admin-Seite navigieren, können Sie die Kommentare entweder genehmigen oder löschen.

Natürlich werden nur genehmigte Kommentare auf einem bestimmten Beitrag angezeigt und gelöschte Kommentare sind für immer weg.

Wenn Sie dieses Tutorial für Ihr Projekt verwendet haben, würde ich mich freuen, von Ihnen unter @pauliescanlon zu hören.

---

Von Paulie Scanlon ( @pauliescanlon), Front End React UI Developer / UX Engineer: Letztendlich bedeuten Struktur + Ordnung = Spaß.

Besuchen Sie Paulies Blog unter: www.paulie.dev