CRUD mit NextJS beherrschen

In der Webentwicklung sind CRUD-Operationen grundlegende Bausteine ​​und entscheidend für die Datenverwaltung. Sie sind in praktisch jeder Anwendung allgegenwärtig, von einfachen Websites bis hin zu komplexen Unternehmenslösungen.

Benutzer von NestJS Boilerplate konnten bereits ein leistungsstarkes neues Tool evaluieren und verwenden – CLI, mit dem Sie Ressourcen und ihre Eigenschaften automatisch erstellen können. Mit diesem Tool können Sie alle CRUD-Operationen durchführen und ihnen die erforderlichen Felder hinzufügen, ohne eine einzige Codezeile manuell schreiben zu müssen. Wie wir bereits mehrfach angekündigt haben, umfasst das BC Boilerplates-Ökosystem inzwischen eine vollständig kompatible Extensive-React-Boilerplate, um die volle Funktionalität bereitzustellen (die im Prinzip eine völlig unabhängige Lösung sein kann). Lassen Sie uns nun CRUD-Operationen aus der Frontend-Perspektive untersuchen.

In Next.js, einem React-Framework mit serverseitigen Rendering-Funktionen, können diese Vorgänge effizient mit Funktionen verwaltet werden, die Leistung, SEO und Entwicklererfahrung verbessern. Zuvor haben wir einen Artikel über einen effektiven Weg zum Starten eines NextJS-Projekts veröffentlicht, und jetzt wollen wir weitergehen und die Details und Nuancen der Arbeit mit den APIs in Next.js analysieren.

Wie wir wissen, steht das Akronym CRUD für Create, Read, Update und Delete. Dieses Konzept stellt die grundlegenden Operationen dar, die an beliebigen Daten ausgeführt werden können. Betrachten wir die Arbeit mit CRUD-Vorgängen am Beispiel des Verwaltungspanel-Benutzers, in dem Funktionen wie das Hinzufügen, Bearbeiten und Löschen von Benutzern sowie das Abrufen von Informationen über sie implementiert sind. Die unten besprochenen benutzerdefinierten React-Hooks, die die Datenverarbeitung in React Query, Paginierung, Fehlermanagement und mehr verwalten, sind bereits in die Extensive-React-Boilerplate integriert. Natürlich können Sie dieses Standardbeispiel direkt nutzen. In den folgenden Abschnitten teilen wir unsere Erkenntnisse zur Implementierung dieser Funktionen.

Vorgang erstellen

Anwendungsfall: Übermittlung von Daten zum Erstellen einer neuen Ressource (z. B. Benutzerregistrierung, Hinzufügen eines neuen Produkts).
Implementierung: Sammeln Sie Daten aus dem Formular, senden Sie eine POST-Anfrage an den Server, verarbeiten Sie die Antwort und aktualisieren Sie die Benutzeroberfläche entsprechend.

Beobachten wir ein Beispiel. Das Erstellen einer POST-Anfrage an die API umfasst die Erstellung eines neuen Benutzers. Im Snippet unten wird der Hook „usePostUserService“ verwendet, um diese Logik zu kapseln. Wir haben die Datenstruktur zum Erstellen eines neuen Benutzers durch die Definition der Anforderungs- und Antworttypen spezifiziert, lassen diesen Teil hier jedoch aus, um Ihnen die Konzentration zu erleichtern. Detailliertere Informationen oder ein vollständigeres Bild finden Sie im Repository Extensive-React-Boilerplate, da dieser und alle folgenden Codeausschnitte von dort stammen.
Daher erstellen wir einen benutzerdefinierten Hook „usePostUserService“, der den „useFetch“-Hook verwendet, um eine POST-Anfrage zu senden. Es nimmt Benutzerdaten als Eingabe und sendet sie an die API:

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<userpostresponse>);
    },
    [fetch]
  );
}

</userpostresponse>

Die Funktion wrapperFetchJsonResponse wird später in diesem Artikel untersucht, wenn wir zum Thema „Fehlerbehandlung“ kommen.

Lesevorgänge

Anwendungsfall: Abrufen und Anzeigen einer Liste von Ressourcen oder einer einzelnen Ressource (z. B. Abrufen von Benutzerprofilen und Produktlisten).
Implementierung: Senden Sie eine GET-Anfrage, um Daten abzurufen, Lade- und Fehlerzustände zu verarbeiten und die Daten in der Benutzeroberfläche darzustellen.

In unserem Beispiel umfasst das Lesen von Daten das Senden von GET-Anfragen an die API, um Benutzerdaten abzurufen. Dies kann das Abrufen aller Benutzer mit Paginierung, Filtern und das Sortieren oder Abrufen eines einzelnen Benutzers nach ID umfassen, nachdem die Anfrage (UsersRequest) und die Antworttypen (UsersResponse) definiert wurden.
Um alle Benutzer abzurufen im benutzerdefinierten useGetUsersService-Hook senden wir eine GET-Anfrage mit Abfrageparametern für Paginierung, Filter und Sortierung:

function useGetUsersService() {
  const fetch = useFetch();

  return useCallback(
    (data: UsersRequest, requestConfig?: RequestConfigType) => {
      const requestUrl = new URL(`${API_URL}/v1/users`);
      requestUrl.searchParams.append("page", data.page.toString());
      requestUrl.searchParams.append("limit", data.limit.toString());
      if (data.filters) {
        requestUrl.searchParams.append("filters", JSON.stringify(data.filters));
      }
      if (data.sort) {
        requestUrl.searchParams.append("sort", JSON.stringify(data.sort));
      }

      return fetch(requestUrl, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<usersresponse>);
    },
    [fetch]
  );
}
</usersresponse>

Zum Abrufen eines einzelnen Benutzers sendet der useGetUserService-Hook eine GET-Anfrage, um einen Benutzer anhand der ID abzurufen:

function useGetUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<userresponse>);
    },
    [fetch]
  );
}
</userresponse>

Update-Vorgang

Anwendungsfall: Bearbeiten einer vorhandenen Ressource (z. B. Aktualisieren von Benutzerinformationen, Bearbeiten eines Blogbeitrags).
Implementierung: Sammeln Sie aktualisierte Daten, senden Sie eine PUT- oder PATCH-Anfrage an den Server, verarbeiten Sie die Antwort und aktualisieren Sie die Benutzeroberfläche.

Lassen Sie uns die Aktualisierung eines vorhandenen Benutzers durchführen, indem wir eine PATCH-Anfrage mit den aktualisierten Benutzerdaten an die API senden. Dazu senden wir im benutzerdefinierten usePatchUserService-Hook eine PATCH-Anfrage mit der Benutzer-ID und aktualisierten Daten, nachdem wir die Anfrage UserPatchRequest und die Antworttypen UserPatchResponse:
definiert haben

function usePatchUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPatchRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "PATCH",
        body: JSON.stringify(data.data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<userpatchresponse>);
    },
    [fetch]
  );
}
</userpatchresponse>

Hinweis: Die Verwendung von PATCH anstelle von PUT ist für teilweise Datenaktualisierungen fortgeschrittener, während PUT normalerweise für vollständige Ressourcenaktualisierungen verwendet wird.

Vorgang löschen

Anwendungsfall:Entfernen einer Ressource (z. B. Löschen eines Benutzers oder Entfernen eines Elements aus einer Liste).
Implementierung: Senden Sie eine DELETE-Anfrage an den Server, verarbeiten Sie die Antwort und aktualisieren Sie die Benutzeroberfläche, um die Entfernung widerzuspiegeln.

In unserem nächsten Beispiel umfasst das Löschen eines Benutzers das Senden einer DELETE-Anfrage an Ihre API mit der Benutzer-ID. Nach der Definition der Anfrage (UsersDeleteRequest) und der Antworttypen (UsersDeleteResponse) im useDeleteUsersService-Hook wird eine DELETE-Anfrage gesendet, um den Benutzer anhand der ID zu entfernen.

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<userpostresponse>);
    },
    [fetch]
  );
}

</userpostresponse>

Diese Hooks abstrahieren die Komplexität der Erstellung von HTTP-Anfragen und der Verarbeitung von Antworten. Die Verwendung eines solchen Ansatzes gewährleistet eine saubere und wartbare Codebasis, da die Datenabruflogik in Ihren Komponenten gekapselt und wiederverwendbar ist.

Abrufen von Daten in Next.js

Okay, wir haben uns mit Beispielen für die Verarbeitung von CRUD-Operationen befasst und werfen einen genaueren Blick auf die Methoden zum Erhalten von Daten, die Next.js bietet, da es als Framework seine Funktionen und Optimierungen über React hinzufügt. Es ist klar, dass Next.js über CSR (Client-Side Rendering) hinaus erweiterte Funktionen wie SSR (Server-Side Rendering) und SSG (Static Site Generation), integrierte API-Routen und Hybrid-Rendering. Lassen Sie uns also Gemeinsamkeiten und Unterschiede beim Abrufen von Daten in Next.js und React besprechen.

Sobald React-Apps rein clientseitig sind, erfolgt der Datenabruf auf dem Client nach dem ersten Laden der Seite. Für dynamische Seiten, die bei jedem Laden einer Seite Daten abrufen müssen, ist die Verwendung von SSR

geeigneter. In diesem Fall werden die Daten zum Zeitpunkt der Anforderung auf dem Server abgerufen. Im Fall von SSG, das für statische Seiten geeignet ist, bei denen sich Daten nicht oft ändern, werden die Daten zum Zeitpunkt der Erstellung abgerufen. Die getStaticProps-Methode hilft uns also, Daten zur Erstellungszeit abzurufen
(SSG). Wenn wir benötigen, dass Seiten basierend auf dynamischen Routen und den zur Erstellungszeit abgerufenen Daten vorab gerendert werden, ermöglicht dies die getStaticPaths-Methode. Es wird in Verbindung mit getStaticProps verwendet, um dynamische Routen zur Erstellungszeit zu generieren. Es ist zu beachten, dass wir ab Next 14 Anfragen ohne diese Methoden direkt in Komponenten stellen können, was ein besseres „Reaktionserlebnis“ bietet. Clientseitiger Datenabruf mit useQuery kann für interaktive Komponenten verwendet werden, die Daten auf der Clientseite abrufen müssen, wobei der Anfangszustand aus serverseitig abgerufenen Daten hydratisiert wird. Zum Abrufen von Daten, die sich häufig ändern, oder zum Hinzufügen clientseitiger Interaktivität ist die useSWR-Strategie nützlich. Es handelt sich um einen React-Hook für den clientseitigen Datenabruf mit Caching und erneuter Validierung. Es ermöglicht das Abrufen von Daten auf der Clientseite, normalerweise nach dem ersten Laden der Seite. Allerdings ruft es keine Daten zur Erstellungszeit oder auf dem Server für SSR ab, kann aber bei Bedarf erneut validieren und neue Daten abrufen.

Um die Informationen zu den oben genannten Methoden zusammenzufassen, können wir einen Blick auf die Tabelle werfen, die einen umfassenden Überblick über die verschiedenen Datenabrufmethoden in Next.js bietet und deren jeweilige Zeitabläufe und Anwendungsfälle hervorhebt.

Method	Data Fetching	Timing	Use Case
getStaticPaths	Static Site Generation (SSG)	At build time	Pre-render pages for dynamic routes based on data available at build time.
getStaticProps	Static Site Generation (SSG)	At build time	Pre-render pages with static content at build time. Ideal for content that doesn't change frequently.
getServerSideProps	Server-Side Rendering (SSR)	On each request	Fetch data on the server for each request, providing up-to-date content. Ideal for dynamic content that changes frequently.
useQuery	Client-Side Rendering (CSR)	After the initial page load	Fetch initial data server-side, hydrate, reduce redundant network requests, Background Refetching.
useSWR	Client-Side Rendering (CSR)	After the initial page load	Fetch and revalidate data on the client-side, suitable for frequently changing data.

Verwenden von React Query mit Next.js

React Query bietet Hooks zum Abrufen, Zwischenspeichern, Synchronisieren und Aktualisieren des Serverstatus, was es zu einem großartigen Tool für die Verarbeitung von Daten in React- und Next.js-Anwendungen macht. Die wichtigsten Vorteile seiner Verwendung sind:

• Effizienter Datenabruf: Es übernimmt das Caching und die Hintergrunddatensynchronisierung und reduziert so redundante Netzwerkanfragen.
• Automatisches erneutes Abrufen:Daten können automatisch im Hintergrund erneut abgerufen werden, wenn sie veraltet sind, sodass sichergestellt wird, dass auf der Benutzeroberfläche immer die neuesten Informationen angezeigt werden.
• Integrierte Fehlerbehandlung: Integrierte Unterstützung für die Behandlung von Fehlern und Wiederholungsversuchen, wodurch die Verwaltung von Netzwerkausfällen und Serverfehlern erleichtert wird.
• Optimistische Updates: Der useMutation-Hook bietet optimistische Updates, indem er eine einfache Möglichkeit bietet, sowohl die optimistischen UI-Änderungen als auch die Rollback-Logik zu verarbeiten, wenn die Serveranforderung fehlschlägt.
• Einfache Integration mit Next.js: Es kann nahtlos in andere Next.js-Datenabrufmethoden wie getStaticProps oder getServerSideProps (falls erforderlich) integriert werden.
• Inspektion von Abfragen und Mutationen: Das ReactQueryDevtools-Tool bietet die Möglichkeit, den Status, die Daten, Fehler und andere Details aller aktiven Abfragen und Mutationen anzuzeigen und zu beobachten, wie sich die Abfragestatus in Echtzeit aktualisieren, während Ihre Anwendung ausgeführt wird .

QueryClientProvider

QueryClientProvider ist eine Kontextanbieterkomponente, die eine QueryClient-Instanz für den React-Komponentenbaum bereitstellt. Diese Instanz ist für die Verwendung von Hooks wie useQuery erforderlich. Um es einzurichten, muss es im Stammverzeichnis Ihres Komponentenbaums platziert werden und globale Einstellungen für Abfragen und Mutationen wie Wiederholungsverhalten, Cache-Zeit und mehr konfiguriert werden. Danach wird der React Query-Client initialisiert und in der gesamten Anwendung verfügbar gemacht.

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<userpostresponse>);
    },
    [fetch]
  );
}

</userpostresponse>

Warum sollte es also zum Projekt hinzugefügt werden? Es ist vorteilhaft für:

• Zentralisierte Konfiguration für alle Abfragen und Mutationen.
• Einfache Einrichtung und Integration in bestehende React-Anwendungen.
• Ermöglicht Funktionen wie Caching, erneutes Abrufen im Hintergrund und Abfrageungültigmachung.

React Query Devtools

Die andere wichtige Funktion von React Query sind React Query Devtools – ein Entwicklungstool zum Überprüfen und Debuggen von React Query-Zuständen. Es kann einfach zu Ihrer Anwendung hinzugefügt und über eine Browsererweiterung oder als Komponente wie im vorherigen Beispiel aufgerufen werden.
Während der Entwicklung können React Query Devtools zur Inspektion einzelner Abfragen und Mutationen verwendet werden, um zu verstehen, warum bestimmte Abfragen vorab abrufen, den Status des Abfragecaches überwachen und sehen, wie er sich im Laufe der Zeit entwickelt.

Paginierung und unendliches Scrollen

Um Paginierungssteuerungen oder unendliches Scrollen mithilfe von Funktionen in Bibliotheken zu implementieren, ist useInfiniteQuery perfekt geeignet. Zunächst generieren wir eindeutige Schlüssel zum Zwischenspeichern und Abrufen von Abfragen in React Query. Die by-Methode hier erstellt einen eindeutigen Schlüssel basierend auf den Sortier- und Filteroptionen.

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<userpostresponse>);
    },
    [fetch]
  );
}

</userpostresponse>

Dazu verwenden wir die Funktion „useInfiniteQuery“ von React Query und verwenden den oben im Abschnitt „Lesevorgänge“ besprochenen Hook „useGetUsersService“.

function useGetUsersService() {
  const fetch = useFetch();

  return useCallback(
    (data: UsersRequest, requestConfig?: RequestConfigType) => {
      const requestUrl = new URL(`${API_URL}/v1/users`);
      requestUrl.searchParams.append("page", data.page.toString());
      requestUrl.searchParams.append("limit", data.limit.toString());
      if (data.filters) {
        requestUrl.searchParams.append("filters", JSON.stringify(data.filters));
      }
      if (data.sort) {
        requestUrl.searchParams.append("sort", JSON.stringify(data.sort));
      }

      return fetch(requestUrl, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<usersresponse>);
    },
    [fetch]
  );
}
</usersresponse>

QueryFn ruft hier die Benutzerdaten basierend auf den aktuellen Seiten-, Filter- und Sortierparametern ab, und die Funktion getNextPageParam bestimmt die nächste abzurufende Seite basierend auf der Antwort der letzten Seite. Wenn der Benutzer scrollt oder weitere Daten anfordert, ruft useInfiniteQuery automatisch den nächsten Datensatz basierend auf dem nextPage-Parameter ab – so erfolgt das unendliche Scrollen. Die Cache-Zeit für die Abfrage wird durch den gcTime-Parameter festgelegt.

Insgesamt bietet React Query eine umfassende Lösung zum Verwalten und Debuggen des Serverstatus in React-Anwendungen. QueryClientProvider gewährleistet eine zentralisierte und konsistente Konfiguration für alle Abfragen und Mutationen, während ReactQueryDevtools leistungsstarke Tools zum Überprüfen und Verstehen des Abfrageverhaltens während der Entwicklung bietet.

Fehlerbehandlung

Die Implementierung von CRUD-Operationen erfordert immer eine ordnungsgemäße Fehlerbehandlung, um Benutzerfreundlichkeit und Anwendungszuverlässigkeit sicherzustellen. Serverfehler sind normalerweise mit einer fehlgeschlagenen Verarbeitung einer Clientanforderung, Fehlern im Servercode, einer Ressourcenüberlastung, einer Fehlkonfiguration der Infrastruktur oder Fehlern bei externen Diensten verbunden. Zur Fehlerbehandlung empfiehlt Extensive-react-boilerplate die Verwendung der Funktion „wrapperFetchJsonResponse“:

function useGetUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<userresponse>);
    },
    [fetch]
  );
}
</userresponse>

Abschluss

In diesem Artikel haben wir die grundlegenden CRUD-Operationen behandelt und Datenabruftechniken in NextJS untersucht. Wir haben uns intensiv mit der Verwendung von React Query zum Verwalten des Status befasst und außerdem die Funktionen von QueryClientProvider und ReactQueryDevtools zum Debuggen und Optimieren des Datenabrufs erläutert. Darüber hinaus haben wir die Implementierung von Paginierung und unendlichem Scrollen zur Verarbeitung großer Datenmengen besprochen und uns mit der Fehlerbehandlung befasst, um Ihre Anwendungen robuster zu machen und ein reibungsloses Benutzererlebnis zu gewährleisten.

Wenn Sie die in diesem Artikel beschriebenen Beispiele und Techniken befolgen, sollten Sie nun gut für die Handhabung von CRUD-Vorgängen in Ihren NextJS-Projekten gerüstet sein. Alternativ können Sie für Ihr Projekt unsere Extensive-react-boilerplate-Vorlage verwenden. Es verfügt über ein vollständig kompatibles Nestjs-Boilerplate-Backend, das die Möglichkeit implementiert, innerhalb von Minuten mit CRUD-Vorgängen zu arbeiten, ohne dass eine einzige Codezeile über die CLI erforderlich ist. Wir haben dies hier und hier für Entitätsbeziehungen ausführlicher behandelt. Experimentieren Sie weiter, bleiben Sie über Best Practices auf dem Laufenden und probieren Sie dieses Beispiel gerne aus, wenn Sie es nützlich finden.

Unser BC Boilerplates-Team ist stets auf der Suche nach Möglichkeiten, die Entwicklung zu verbessern. Wir würden gerne Ihre Meinung zu GitHub-Diskussionen oder in den Kommentaren unten hören.

Vollständige Credits für diesen Artikel gehen an Olena Vlasenko und Vlad Shchepotin ??

Das obige ist der detaillierte Inhalt vonCRUD mit NextJS beherrschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!