Tanstack Query, auch bekannt als React Query, ist eine beliebte Bibliothek zum Abrufen von Daten in React-Anwendungen. React Query vereinfacht den Prozess des Abrufens, Zwischenspeicherns und Aktualisierens von Daten in Webanwendungen. In diesem Artikel wird die Verwendung von React Query zum Abrufen von Daten in einer React-Anwendung erläutert.

React Query installieren und einrichten

Sie können React Query mit npm oder Garn installieren. Um es mit npm zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm i @tanstack/react-query

Um es mit Garn zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:

Garn füge @tanstack/react-query hinzu

Nach der Installation der React Query-Bibliothek packen Sie die gesamte Anwendung in die QueryClientProvider Komponente. Der QueryClientProvider -Komponente umschließt Ihre gesamte Anwendung und stellt eine Instanz von bereit Abfrageclient auf alle untergeordneten Komponenten.

Der Abfrageclient ist das zentrale Element von React Query. Der Abfrageclient verwaltet die gesamte Logik zum Abrufen und Zwischenspeichern von Daten. Der QueryClientProvider Komponente nimmt die Abfrageclient als Requisite und stellt es dem Rest Ihrer Anwendung zur Verfügung.

Zur Nutzung der QueryClientProvider und das Abfrageclient in Ihrer Anwendung müssen Sie sie aus der importieren @tanstack/react-query Bibliothek:

importieren Reagieren aus'reagieren';
importieren ReactDOM aus'react-dom/client';
importieren App aus'./App';
importieren { QueryClientProvider, QueryClient } aus'@tanstack/react-query';
konst queryClient = neu AbfrageClient();
ReactDOM.createRoot(dokumentieren.getEementd('Wurzel')).machen(



 </QueryClientProvider>
 </React.StrictMode>
)

Den useQuery-Hook verstehen

Der useQuery Hook ist eine von der React Query-Bibliothek bereitgestellte Funktion, die Daten von einem Server oder einer API abruft. Es akzeptiert ein Objekt mit den folgenden Eigenschaften: queryKey (der Schlüssel der Abfrage) und AbfrageFn (eine Funktion, die ein Versprechen zurückgibt, das sich in die Daten auflöst, die Sie abrufen möchten).

Der queryKey identifiziert die Abfrage; Sie muss für jede Abfrage in Ihrer Anwendung eindeutig sein. Der Schlüssel kann ein beliebiger Wert sein, z. B. eine Zeichenfolge, ein Objekt oder ein Array.

Um Daten mit dem abzurufen useQuery Hook, Sie müssen es aus der importieren @tanstack/react-query Bibliothek, passieren a queryKey und benutze die AbfrageFn um die Daten von einer API abzurufen.

Zum Beispiel:

importieren Reagieren aus'reagieren';
importieren Axios aus'axios';
importieren { useQuery } aus'@tanstack/react-query';
FunktionHeim() {
konst postQuery = useQuery({
 AbfrageSchlüssel: ['Beiträge'],
 AbfrageFn: asynchron () => {
konst Antwort = erwarten axios.get(' https://jsonplaceholder.typicode.com/posts');
konst Daten = erwarten Antwort.Daten;
zurückkehren Daten;
 }
 })
Wenn( postQuery.isLoading ) zurückkehren ( <h1>Wird geladen...h1>)
Wenn( postQuery.isError ) zurückkehren (<h1>Fehler beim Laden der Daten!!!h1>)

zurückkehren (



Startseite</h1>
 { postQuery.data.map( (Artikel) => ( <PTaste={Artikel Identifikationsnummer}>{Artikel.Titel}P>)) }
 </div>
 )
}
ExportStandard Heim;

Der useQuery Hook gibt ein Objekt zurück, das Informationen zur Abfrage enthält. Der postAbfrage Objekt enthält die ladet, istFehler, Und istErfolg Zustände. Der ladet, istFehler, Und istErfolg Staaten verwalten den Lebenszyklus des Datenabrufprozesses. Der postQuery.data -Eigenschaft enthält die von der API abgerufenen Daten.

Der ladet state ist ein boolescher Wert, der angibt, ob die Abfrage derzeit Daten lädt. Wenn das ladet state wahr ist, die Abfrage ausgeführt wird und die angeforderten Daten nicht verfügbar sind.

Der istFehler state ist auch ein boolescher Wert, der angibt, ob während des Datenabrufs ein Fehler aufgetreten ist. Wenn istFehler wahr ist, konnte die Abfrage keine Daten abrufen.

Der istErfolg state ist ein boolescher Wert, der angibt, ob die Abfrage erfolgreich Daten abgerufen hat. Wenn istErfolg zutrifft, können Sie sich die abgerufenen Daten in Ihrer Anwendung anzeigen lassen.

Beachten Sie, dass Sie auf die zugreifen können queryKey Verwendung der AbfrageFn. Der AbfrageFn nimmt ein einziges Argument. Dieses Argument ist ein Objekt, das die für die API-Anforderung erforderlichen Parameter enthält. Einer dieser Parameter ist die queryKey.

Zum Beispiel:

useQuery({
 AbfrageSchlüssel: ['Beiträge'],
 AbfrageFn: asynchron (obj) => {
Konsole.log ( obj.queryKey );
 }
 })

Umgang mit veralteten Daten

Die React-Abfrage bietet viele Möglichkeiten, mit veralteten Daten umzugehen. Die React Query-Bibliothek stellt sicher, dass automatisch eine neue Abrufanforderung an Ihre API gestellt wird, wenn die abgerufenen Daten veraltet sind. Dies garantiert, dass Sie stets die aktuellsten Daten rendern.

Sie können steuern, wie schnell Ihre Daten veraltet sind, und das Zeitintervall zwischen den einzelnen automatischen Abrufanforderungen, indem Sie die verwenden staleTime Und NeuabrufIntervall Optionen. Der staleTime Option ist eine Eigenschaft, die angibt, wie viele Millisekunden die zwischengespeicherten Daten gültig sind, bevor sie veraltet sind.

Der NeuabrufIntervall Option ist eine Eigenschaft, die die Anzahl der Millisekunden zwischen jeder automatischen Abrufanforderung der React Query-Bibliothek angibt.

Zum Beispiel:

useQuery({
 AbfrageSchlüssel: ['...'],
 AbfrageFn: () => {...},
 staleTime: 1000;
})

In diesem Beispiel ist die staleTime beträgt 1000 Millisekunden (1 Sekunde). Die abgerufenen Daten veralten nach 1 Sekunde, und dann stellt die React Query-Bibliothek eine weitere Abrufanforderung an die API.

Hier verwenden Sie die NeuabrufIntervall Option zum Steuern des Zeitintervalls zwischen jeder automatischen Abrufanforderung:

useQuery({
 AbfrageSchlüssel: ['...'],
 AbfrageFn: () => {...},
 NeuabrufIntervall: 6000;
})

Der NeuabrufIntervall beträgt 6000 Millisekunden (6 Sekunden). Die React-Abfrage löst nach 6 Sekunden automatisch eine neue Abrufanforderung aus, um die zwischengespeicherten Daten zu aktualisieren.

Den useMutation-Hook verstehen

Der verwendenMutation Hook ist ein mächtiges Werkzeug in der React Query-Bibliothek. Es führt eine asynchrone Operation aus Mutationen, wie das Erstellen oder Aktualisieren von Daten auf einem Server. Verwendung der verwendenMutation Hook können Sie Ihren Anwendungsstatus und Ihre Benutzeroberfläche basierend auf der Reaktion der Mutation einfach aktualisieren.

Nachfolgend haben wir eine erstellt Beitrag hinzufügen Komponente, die a rendert Formular mit einem Eingabefeld und einem Senden-Button. Diese Formularkomponente verwendet den useMutation-Hook, um den Status zu aktualisieren:

importieren Reagieren aus'reagieren'
FunktionBeitrag hinzufügen() {
konst[post, setPost] = React.useState({
 Titel: ""
 })
FunktionhandleChange(Fall) {
 setPost( (vorherigerZustand) => ({
 ...prevState,
 [Ereignis.Zielname]: Ereignis.Zielwert
 }) )
 }
zurückkehren (



 Typ="Text"
 Platzhalter='Titel hinzufügen'
 name='Titel'
 onChange={handleChange} 
 value={post.title}
 />
Beitrag hinzufügen</button>
 </form>
 )
}
ExportStandard AddPost;

Im Inneren des Beitrag hinzufügen Komponente ist ein Zustand Post die als Objekt mit einer Eigenschaft dient, Titel.

Der handleChange Funktion aktualisiert den Zustand Post wenn Benutzer in die Eingabefelder tippen. Nach dem Erstellen der Beitrag hinzufügen Komponente importieren wir die verwendenMutation Hook und verwenden Sie es, um die API zu aktualisieren.

Zum Beispiel:

importieren {useMutation} aus'@tanstack/react-query'
importieren Axios aus'axios';
konst newPostMutation = useMutation({
 mutationFn: asynchron () => {
konst Antwort = erwarten axios.post('', {
 Titel: Beitrag.Titel,
 });
konst Daten = Antwort.Daten;
zurückkehren Daten;
 }
 })

Der verwendenMutation Hook verarbeitet die HTTP-Anforderung zum Erstellen eines neuen Beitrags. Der newPostMutation Die Konstante repräsentiert die Mutationsfunktion und ihre Konfigurationsoptionen.

Der MutationFn ist eine asynchrone Funktion, die eine POST-Anforderung an den API-Endpunkt sendet. Die Anforderung enthält ein Objekt, das die enthält Titel Wert aus dem Post Objekt.

Zum Laufen MutationFn, müssen Sie anrufen newPostMutation.mutate() Methode:

konst handleSubmit = asynchron (Ereignis) => { 
 event.preventDefault();
 neuePostMutation.mutate();
}
zurückkehren (


 Typ="Text"
 Platzhalter='Titel hinzufügen'
 name='Titel'
 onChange={handleChange} 
 value={post.title}
 />
Beitrag hinzufügen</button>
 </form>
 )
}

Beim Absenden des Formulars wird die ausgeführt handleSubmit Funktion. Der handleSubmit function ist eine asynchrone Funktion, die die Mutationsfunktion auslöst newPostMutation.mutate().

Effizienter Datenabruf mit Tanstack-Abfrage

In diesem Artikel wird untersucht, wie das Abrufen von Daten in einer React-Anwendung mithilfe der tanstack/react-query-Bibliothek gehandhabt wird.

Die tanstack/react-query-Bibliothek bietet ein leistungsstarkes und flexibles Tool zum Abrufen und Zwischenspeichern von Daten in React-Anwendungen. Es ist einfach zu bedienen und seine Caching-Funktionen machen es effizient und reaktionsschnell.

Ob Sie ein kleines persönliches Projekt oder eine umfangreiche Unternehmensanwendung erstellen, die tanstack/react-query-Bibliothek kann Ihnen dabei helfen, Daten effektiv und effizient zu verwalten und anzuzeigen. Neben React bietet Next.js auch mehrere integrierte Prozesse und Bibliotheken von Drittanbietern zum Abrufen von Daten.