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]
  );
}

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]
  );
}

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]
  );
}

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]
  );
}

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]
  );
}

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.

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]
  );
}

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]
  );
}

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]
  );
}

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]
  );
}

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!