React Query 3: Ein Leitfaden zum Abholen und Verwalten von Daten

Vereinfachen Sie die Datenerfassung für Front-End-CRUD-Anwendungen mithilfe von React Query

Bauen von Front-End-CRUD-Anwendungen ist zunächst einfach, aber mit zunehmender Funktionalität steigt die Komplexität rasch an. Für jeden API -Endpunkt sind Statusverwaltung, Synchronisation, Zwischenspeicherung und Fehlerbehandlung erforderlich. In diesem Artikel wird eine Bibliothek namens React Query vorgestellt und wie er all diese Probleme lösen kann. Die Bibliothek behauptet, eine "fehlende Datenerfassungsbibliothek" zu sein und bietet "Serverstaatenverwaltung" für Ihre React -Anwendung.

Wir werden ein komplettes React -Abfrage -Demo -Projekt verwenden, um die von der Bibliothek bereitgestellten Kernfunktionen zu erfahren. Sie können dieses Wissen dann auf Ihr eigenes Projekt anwenden. Lassen Sie uns zunächst ein wenig darüber lernen, bevor wir das Projekt einstellen.

Schlüsselpunkte

• React Query 3 vereinfacht das Statusverwaltung und die Datenerfassung in React -Anwendungen, Handhabung von Cache, Synchronisation und Fehlermanagement effizient.
• Diese Bibliothek ist für Entwickler mit mittlerer bis hoher Ebene geeignet, die mit React, React Router und Rest-APIs vertraut sind.
• React Query 3 fügt der 2.x -Version neue Funktionen und Verbesserungen hinzu und bietet einen Migrationshandbuch für aktualisierte Benutzer.
• Hauptmerkmale der Demo im Demo -Projekt umfassen grundlegende Abfragen, Paging -Abfragen und unbegrenzte Abfragen sowie Erstellen, Update und Löschen von Vorgängen.
• React Query's Devtools Utility unterstützt das Debuggen durch die Visualisierung interner Zustände und Prozesse in Echtzeit.
Konfigurationsoptionen wie
• cacheTime und staleTime optimieren die Leistung durch Verwaltung von Datenfrische und Cache -Dauer.
• Diese Bibliothek unterstützt erweiterte Szenarien wie unbegrenzte Scrollen und komplexe Zustandsabhängigkeiten, die die Benutzererfahrung und die Entwicklererfahrung verbessern.

Über React Query 3

React Query ist ein Open -Source -Projekt, das von Tanner LINSEY erstellt wurde. Die neueste Hauptversion von React Query 3 wurde im Dezember 2020 offiziell veröffentlicht. In dieser neuen Version wurden neue Funktionen hinzugefügt und vorhandene Funktionen verbessert.

Es ist zu beachten, dass es einige signifikante Änderungen im Vergleich zur zuvor sehr beliebten Version von React Query 2.x hat. Es gibt einen Migrationshandbuch, der diese Änderungen deutlich erklärt, da Sie möglicherweise auf viele veraltete Tutorials stoßen, die für ältere Versionen geschrieben wurden.

Die neue Version bietet eine enorme Verbesserung, und viele der zuvor gemeldeten Fehler wurden gelöst. Obwohl die 3.x -Version für die Produktion bereit ist, ist sie noch in der Entwicklung und wird regelmäßig mit neu entdeckten Fehler behoben.

Vorsichtsmaßnahmen

Dieser Artikel ist für Front-End-Entwickler mit mittlerer bis hoher Ebene, die die folgenden Grundfähigkeiten und Kenntnisse gemeistert haben:

• reagieren
• reagieren Sie Router
• reagieren haken
• REST -API -Datenerfassung

In Ihrer Entwicklungsmaschinenumgebung müssen Sie Folgendes festlegen:

• node.js
• git
• REST -Clients wie REST -Erweiterungen für Postbote, Schlaflosigkeit oder VS -Code

Über das Projekt

Das von uns analysierende Demo-Projekt ist eine React-Front-End-Anwendung, die die React-Abfrage verwendet, um Daten vom Rest JSON-API-Server bereitzustellen. Die App besteht aus nur fünf Seiten, die zeigen, was React Query bietet. Diese Funktionen umfassen:

• grundlegende Abfrage
• Pagination Query
• unbegrenzte Abfrage
• Betrieb
erstellen
• Aktualisieren Sie den Vorgang
• Betrieb löschen

React Query bietet mehr Funktionen, dieser Artikel ist jedoch im Raum begrenzt und kann nicht nacheinander eingeführt werden. Hier ist eine Vorschau der App, die wir verwenden werden:

Projekteinstellungen

Bevor wir mit dem Einrichten beginnen, denke ich, dass es besser ist, einen kurzen Blick auf die anderen im Projekt verwendeten Abhängigkeiten zu werfen. Dazu gehören:

• vite: Ein sehr schnelles Build -Tool
• Windics: Ein sehr schneller Rückenwind -CSS -Compiler
React Hook Form: eine Formbuilder- und Verifizierungsbibliothek, die React Hooks
• verwendet
reagem Modal: Eine zugängliche modale Komponente
axios: Ein versprochener Browser HTTP-Client

JSON -Server: Ein vollständiger Fälschungs -REST -API -Server

# 克隆项目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 导航到项目目录
cd react-query-demo

# 安装包依赖项
npm install

# 为 json-server 设置数据库文件
cp api/sample.db.json api/db.json

# 启动 json-server
npm run json-server

Um die React -Abfrage -Demo -Anwendung auf Ihrem eigenen Computer einzurichten, führen Sie die folgenden Anweisungen aus: npm run json-server

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

Die von JSON-Server verwendete Datenbankdatei enthält ein Array von Benutzern. Wenn Sie

ausführen, startet ein gefälschter API -Server auf Port 3004. Durch Ausführen einer Get -Anfrage werden das folgende Beispiel JSON -Antwort erstellt:

# 在另一个终端中，启动 React 开发服务器
npm run dev

Starten Sie als nächstes den Entwicklungsserver, auf dem der Front-End-Code ausgeführt wird: http://localhost:3000

Gehen Sie zu Ihrem Browser und öffnen Sie
• , um auf die Anwendung zuzugreifen. Sie sollten die gleiche Erfahrung wie in der obigen Vorschau haben. Stellen Sie sicher, dass Sie die folgenden Aufgaben ausführen, um die Funktionalität der Anwendung gründlich zu untersuchen:
Die Basis -Abfrageseite (Homepage) anzeigen.
Zugriff auf die Paging -Seite und interagieren Sie mit den vorherigen und nächsten Schaltflächen.
Zugriff auf unbegrenzte Seiten und interagieren Sie mit der Schaltfläche "More".
kehren Sie zur grundlegenden Abfrageseite zurück und klicken Sie auf die Schaltfläche "Benutzer erstellen". Sie werden auf die Benutzerseite erstellen. Füllen Sie das Formular aus und klicken Sie auf die Schaltfläche Speichern.
In der Benutzertabelle finden Sie das Symbol Bearbeiten. Klicken Sie darauf. Dadurch werden Sie zur Seite "Benutzern" bearbeiten. Nehmen Sie alle Änderungen vor und klicken Sie auf die Schaltfläche "Speichern".

In der Benutzertabelle finden Sie das Symbol "Löschen". Klicken Sie darauf. Dadurch wird ein modales Dialogfeld gestartet, in dem Sie aufgefordert werden, die Löschung zu bestätigen. Klicken Sie auf die Schaltfläche Löschen, um zu bestätigen.

Nachdem wir alle oben genannten Aufgaben erledigt haben, können wir das Projekt zerlegen. Bitte überprüfen Sie die Projektstruktur, um den Ort jeder Komponente und jeder Ansicht zu verstehen. Ich werde in diesem Artikel eine vereinfachte Version dieser Komponenten bereitstellen, damit Sie die Grundlagen der Verwendung von React -Abfrage in Ihrem Projekt verstehen können.

<🎜> React React Abfrage <🎜> <🎜>

React -Abfrage kann in leeren oder vorhandenen React -Projekten mit dem folgenden Befehl installiert werden:

# 克隆项目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 导航到项目目录
cd react-query-demo

# 安装包依赖项
npm install

# 为 json-server 设置数据库文件
cp api/sample.db.json api/db.json

# 启动 json-server
npm run json-server

Dieses Paket enthält alles, was Sie benötigen - einschließlich der Devtools -Dienstprogrammfunktionen, die wir später diskutieren werden. Nach der Installation des Pakets müssen Sie Ihre oberste Komponente-App.jsx-wie unten gezeigt:

aktualisieren:

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

Jede untergeordnete Komponente von QueryClientProvider

kann von der React Query Library zugreifen. Die Hooks, die wir in diesem Artikel verwenden werden, sind:

• useQuery
• useInfiniteQuery
• useMutation
• useQueryClient

App.jsx Folgendes ist eine aktualisierte (vereinfachte Version)

mit den Unteransichten, die wir verwenden:

# 在另一个终端中，启动 React 开发服务器
npm run dev

(solcher Inhalt, bitte übersetzen Sie die verbleibenden Teile nach Ihren Anforderungen, einschließlich UI -Komponenten, grundlegenden Abfragen, Paginierungsabfragen, unbegrenzten Abfragen, Mutationen und anderen Kapiteln.)

Das obige ist der detaillierte Inhalt vonReact Query 3: Ein Leitfaden zum Abholen und Verwalten von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!