Tanstack Query, AKA React Query, to popularna biblioteka do pobierania danych w aplikacjach React. React Query upraszcza proces pobierania, buforowania i aktualizowania danych w aplikacjach internetowych. W tym artykule omówimy użycie React Query do obsługi pobierania danych w aplikacji React.

Instalacja i konfiguracja React Query

Możesz zainstalować React Query za pomocą npm lub przędzy. Aby zainstalować go za pomocą npm, uruchom następujące polecenie w swoim terminalu:

npm i @tanstack/react-query

Aby zainstalować go za pomocą przędzy, uruchom następujące polecenie w swoim terminalu:

przędza dodaj @tanstack/react-query

Po zainstalowaniu biblioteki React Query opakowujemy całą aplikację w QueryClientProvider część. The QueryClientProvider składnik opakowuje całą aplikację i udostępnia instancję ZapytanieKlient do wszystkich jego komponentów potomnych.

The ZapytanieKlient jest centralnym elementem React Query. The

ZapytanieKlient zarządza całą logiką pobierania i buforowania danych. The QueryClientProvider składnik bierze ZapytanieKlient jako rekwizyt i udostępnia go reszcie aplikacji.

Aby skorzystać z QueryClientProvider i ZapytanieKlient w swojej aplikacji, musisz zaimportować je z pliku @tanstack/zareaguj na zapytanie biblioteka:

import Reagować z'reagować';
import ReactDOM z„reaguj/klient”;
import Aplikacja z„./Aplikacja”;
import { QueryClientProvider, QueryClient } z'@tanstack/reaguj na zapytanie';
konst zapytanieKlient = nowy ZapytanieKlient();
ReactDOM.createRoot(dokument.getEementd('źródło')).renderowanie(



 </QueryClientProvider>
 </React.StrictMode>
)

Zrozumienie hooka useQuery

The użyjZapytanie hook to funkcja udostępniana przez bibliotekę React Query, która pobiera dane z serwera lub API. Akceptuje obiekt o następujących właściwościach: zapytanieKlucz (klucz zapytania) i zapytanieFn (funkcja, która zwraca obietnicę, która odnosi się do danych, które chcesz pobrać).

The zapytanieKlucz identyfikuje zapytanie; musi być unikalny dla każdego zapytania w aplikacji. Kluczem może być dowolna wartość, taka jak ciąg znaków, obiekt lub tablica.

Aby pobrać dane za pomocą użyjZapytanie hook, musisz go zaimportować z pliku @tanstack/zareaguj na zapytanie biblioteka, zdać a zapytanieKlucz i skorzystaj z zapytanieFn do pobierania danych z API.

Na przykład:

import Reagować z'reagować';
import osie z„osi”;
import { useQuery } z'@tanstack/reaguj na zapytanie';
funkcjonowaćDom() {
konst postQuery = useQuery ({
 klucz zapytania: [„posty”],
 zapytanieFn: asynchroniczny () => {
konst odpowiedź = czekać na axios.get(' https://jsonplaceholder.typicode.com/posts');
konst dane = czekać na dane.odpowiedzi;
powrót dane;
 }
 })
Jeśli(postQuery.isLoading) powrót ( <h1>Ładowanie...h1>)
Jeśli(postQuery.isError) powrót (<h1>Błąd ładowania danych!!!h1>)

powrót (



Strona główna</h1>
 { postQuery.data.map( (przedmiot) => ( <Pklucz={przedmiot.id}>{Nazwa przedmiotu}P>)) }
 </div>
 )
}
eksportdomyślny Dom;

The użyjZapytanie hook zwraca obiekt, który zawiera informacje o zapytaniu. The postQuery obiekt zawiera ładuje się, jestBłąd, I jestSukces stany. The ładuje się, jestBłąd, I jestSukces stany zarządzają cyklem życia procesu pobierania danych. The postQuery.dane właściwość zawiera dane pobrane z API.

The ładuje się state to wartość logiczna wskazująca, czy zapytanie aktualnie ładuje dane. Kiedy ładuje się stan jest prawdziwy, zapytanie jest w toku, a żądane dane są niedostępne.

The jestBłąd stan jest również wartością logiczną wskazującą, czy wystąpił błąd podczas pobierania danych. Gdy jestBłąd ma wartość true, zapytanie nie powiodło się w celu pobrania danych.

The jestSukces state to wartość logiczna wskazująca, czy zapytanie pomyślnie pobrało dane. Gdy jestSukces jest prawdą, możesz wyświetlić dane pobrane w swojej aplikacji.

Pamiętaj, że możesz uzyskać dostęp do zapytanieKlucz używając zapytanieFn. The zapytanieFn przyjmuje jeden argument. Ten argument jest obiektem zawierającym parametry wymagane dla żądania API. Jednym z takich parametrów jest tzw zapytanieKlucz.

Na przykład:

useQuery({
 klucz zapytania: [„posty”],
 zapytanieFn: asynchroniczny (obiekt) => {
konsola.log( obj.queryKey );
 }
 })

Radzenie sobie z nieaktualnymi danymi

Zapytanie React zapewnia wiele sposobów radzenia sobie z nieaktualnymi danymi. Biblioteka React Query zapewnia automatyczne wysłanie nowego żądania pobrania do twojego API, gdy pobrane dane staną się nieaktualne. Gwarantuje to ciągłe renderowanie najbardziej aktualnych danych.

Możesz kontrolować, jak szybko Twoje dane stają się nieaktualne i jaki jest odstęp czasu między każdym automatycznym żądaniem pobrania, korzystając z nieaktualny czas I Interwał ponownego pobierania opcje. The nieaktualny czas opcja to właściwość określająca liczbę milisekund, przez jaką dane w pamięci podręcznej są ważne, zanim staną się nieaktualne.

The Interwał ponownego pobierania option to właściwość określająca liczbę milisekund między każdym automatycznym żądaniem pobrania biblioteki React Query.

Na przykład:

useQuery({
 klucz zapytania: ['...'],
 zapytanieFn: () => {...},
 nieaktualny czas: 1000;
})

W tym przykładzie nieaktualny czas wynosi 1000 milisekund (1 sekunda). Pobrane dane staną się nieaktualne po 1 sekundzie, a następnie biblioteka React Query wyśle ​​kolejne żądanie pobrania do API.

Tutaj używasz tzw Interwał ponownego pobierania możliwość kontrolowania odstępu czasu między każdym automatycznym żądaniem pobrania:

useQuery({
 klucz zapytania: ['...'],
 zapytanieFn: () => {...},
 interwał ponownego pobierania: 6000;
})

The Interwał ponownego pobierania wynosi 6000 milisekund (6 sekund). React Query automatycznie uruchomi nowe żądanie pobierania, aby zaktualizować dane w pamięci podręcznej po 6 sekundach.

Zrozumienie haka useMutation

The użyj Mutacji hook to potężne narzędzie w bibliotece React Query. To wykonuje operację asynchroniczną mutacje, takie jak tworzenie lub aktualizacja danych na serwerze. Używając użyj Mutacji hook, możesz łatwo zaktualizować stan aplikacji i interfejs użytkownika w oparciu o odpowiedź mutacji.

Poniżej utworzyliśmy plik DodajPost komponent, który renderuje a formularz z polem wejściowym i przyciskiem wyślij. Ten komponent formularza użyje haka useMutation do aktualizacji stanu:

import Reagować z'reagować'
funkcjonowaćDodajPost() {
konst[post, setPost] = React.useState({
 tytuł: ""
 })
funkcjonowaćuchwytZmień(wydarzenie) {
 setPost( (poprzedni stan) => ({
 ...poprzedni stan,
 [nazwa.celu.zdarzenia]: wartość.celu.zdarzenia
 }) )
 }
powrót (



 typ="tekst"
 symbol zastępczy='Dodaj tytuł'
 imię='tytuł'
 onChange={zmiana uchwytu} 
 wartość={post.tytuł}
 />
Dodaj wpis</button>
 </form>
 )
}
eksportdomyślny DodajPost;

W środku DodajPost komponent jest stanem post który służy jako obiekt o jednej właściwości, tytuł.

The uchwytZmień funkcja aktualizuje stan post za każdym razem, gdy użytkownicy wpisują dane w polach wejściowych. Po utworzeniu DodajPost składnik, importujemy użyj Mutacji hook i użyj go do aktualizacji API.

Na przykład:

import { useMutacja } z'@tanstack/reaguj na zapytanie'
import osie z„osi”;
konst newPostMutation = useMutation({
 mutacjaFn: asynchroniczny () => {
konst odpowiedź = czekać na axios.post('', {
 tytuł: post.tytuł,
 });
konst dane = odpowiedź. dane;
powrót dane;
 }
 })

The użyj Mutacji hook obsługuje żądanie HTTP w celu utworzenia nowego postu. The nowyPostMutacja stała reprezentuje funkcję mutacji i jej opcje konfiguracji.

The mutacjaFn to funkcja asynchroniczna, która wysyła żądanie POST do punktu końcowego interfejsu API. Żądanie zawiera obiekt zawierający tytuł wartość od post obiekt.

Aby uruchomić mutacjaFn, będziesz musiał zadzwonić do newPostMutation.mutate() metoda:

konst uchwyt Prześlij = asynchroniczny (zdarzenie) => { 
 zdarzenie.preventDefault();
 newPostMutation.mutate();
}
powrót (


 typ="tekst"
 symbol zastępczy='Dodaj tytuł'
 imię='tytuł'
 onChange={zmiana uchwytu} 
 wartość={post.tytuł}
 />
Dodaj wpis</button>
 </form>
 )
}

Wysłanie formularza spowoduje uruchomienie uchwytPrześlij funkcjonować. The uchwytPrześlij funkcja jest funkcją asynchroniczną, która wyzwala funkcję mutacji newPostMutation.mutate().

Wydajne pobieranie danych za pomocą zapytań Tanstack

W tym artykule opisano, jak obsługiwać pobieranie danych w aplikacji React przy użyciu biblioteki tanstack/react-query.

Biblioteka tanstack/react-query zapewnia potężne i elastyczne narzędzie do pobierania i buforowania danych w aplikacjach React. Jest łatwy w użyciu, a jego możliwości buforowania sprawiają, że jest wydajny i responsywny.

Niezależnie od tego, czy tworzysz mały projekt osobisty, czy rozbudowaną aplikację korporacyjną, biblioteka tanstack/react-query może pomóc w skutecznym i wydajnym zarządzaniu danymi oraz ich wyświetlaniu. Wraz z React, Next.js zapewnia również kilka wbudowanych procesów i bibliotek innych firm do obsługi pobierania danych.