A Tanstack Query, más néven React Query egy népszerű könyvtár a React alkalmazásokban történő adatlekéréshez. A React Query leegyszerűsíti az adatok lekérésének, gyorsítótárazásának és frissítésének folyamatát a webalkalmazásokban. Ez a cikk a React Query használatával foglalkozik az adatlekéréssel egy React alkalmazásban.

A React Query telepítése és beállítása

A React Queryt npm vagy yarn használatával telepítheti. Az npm használatával történő telepítéshez futtassa a következő parancsot a terminálon:

npm i @tanstack/react-query

A fonal használatával történő telepítéshez futtassa a következő parancsot a terminálon:

fonal add @tanstack/react-query

A React Query könyvtár telepítése után a teljes alkalmazást becsomagolja a QueryClientProvider összetevő. A QueryClientProvider összetevő becsomagolja az egész alkalmazást, és egy példányt biztosít a QueryClient minden gyermekkomponenséhez.

A QueryClient a React Query központi része. A QueryClient kezeli az összes adatlekérési és gyorsítótárazási logikát. A QueryClientProvider komponens veszi a QueryClient kellékként, és elérhetővé teszi az alkalmazás többi része számára.

Ahhoz, hogy a QueryClientProvider és a QueryClient alkalmazásában importálnia kell őket a @tanstack/react-query könyvtár:

import Reagál tól től'reagál';
import ReactDOM tól től'react-dom/client';
import App tól től'./Alkalmazás';
import { QueryClientProvider, QueryClient } tól től"@tanstack/react-query";
const queryClient = új QueryClient();
ReactDOM.createRoot(dokumentum.getEementd('gyökér')).Vakol(



 </QueryClientProvider>
 </React.StrictMode>
)

A useQuery Hook megértése

A useQuery A hook a React Query könyvtár által biztosított funkció, amely adatokat kér le egy szerverről vagy API-ról. A következő tulajdonságokkal rendelkező objektumot fogadja el: queryKey (a lekérdezés kulcsa) és queryFn (egy olyan függvény, amely ígéretet ad vissza, amely feloldja a lekérni kívánt adatokat).

A queryKey azonosítja a lekérdezést; egyedinek kell lennie az alkalmazás minden lekérdezéséhez. A kulcs bármilyen érték lehet, például karakterlánc, objektum vagy tömb.

Az adatok lekéréséhez a useQuery horog, importálnia kell a @tanstack/react-query könyvtár, bérlet a queryKey és használja a queryFn hogy lekérje az adatokat egy API-ból.

Például:

import Reagál tól től'reagál';
import axiók tól től"axiók";
import { useQuery } tól től"@tanstack/react-query";
funkcióitthon() {
const postQuery = useQuery({
 queryKey: ["bejegyzések"],
 queryFn: async () => {
const válasz = várja axios.get(' https://jsonplaceholder.typicode.com/posts');
const adatok = várja válasz.adatok;
Visszatérés adat;
 }
 })
ha( postQuery.isLoading ) Visszatérés ( <h1>Betöltés...h1>)
ha( postQuery.isError ) Visszatérés (<h1>Hiba az adatok betöltésekor!!!h1>)

Visszatérés (



Kezdőlap</h1>
 { postQuery.data.map( (tétel) => ( <pkulcs={tárgy azonosító}>{item.title}p>)) }
 </div>
 )
}
exportalapértelmezett Itthon;

A useQuery A hook egy objektumot ad vissza, amely a lekérdezésről tartalmaz információkat. A postQuery az objektum tartalmazza a isBetöltés, isError, és a Siker Államok. A isBetöltés, isError, és a Siker államok kezelik az adatvisszakeresési folyamat életciklusát. A postQuery.data tulajdonság tartalmazza az API-ból lekért adatokat.

A isBetöltés state egy logikai érték, amely jelzi, hogy a lekérdezés jelenleg tölt-e be adatokat. Amikor az isBetöltés állapot igaz, a lekérdezés folyamatban van, és a kért adatok nem érhetők el.

A isError Az állapot egy logikai érték is, amely azt jelzi, hogy történt-e hiba az adatlekérés során. Amikor isError igaz, a lekérdezésnek nem sikerült lekérnie az adatokat.

A a Siker Az állapot egy logikai érték, amely jelzi, hogy a lekérdezés sikeresen lekérte-e az adatokat. Amikor a Siker igaz, megjelenítheti az alkalmazásban lekért adatokat.

Megjegyzés: elérheti a queryKey használni a queryFn. A queryFn egyetlen érvet vesz fel. Ez az argumentum egy objektum, amely tartalmazza az API-kéréshez szükséges paramétereket. Ezen paraméterek egyike a queryKey.

Például:

useQuery({
 queryKey: ["bejegyzések"],
 queryFn: async (obj) => {
konzol.log( obj.queryKey );
 }
 })

Elévült adatok kezelése

A React query számos módot kínál az elavult adatok kezelésére. A React Query könyvtár biztosítja, hogy automatikusan új lekérési kérést küldjön az API-nak, amikor a lekért adatok elavultak. Ez garantálja, hogy Ön folyamatosan a legfrissebb adatokat jeleníti meg.

A segítségével szabályozhatja, hogy az adatok milyen gyorsan avuljanak el, és mennyi idő teljen el az egyes automatikus lekérések között staleTime és refetchInterval lehetőségek. A staleTime Az opció egy olyan tulajdonság, amely megadja, hogy a gyorsítótárazott adatok hány ezredmásodpercben érvényesek, mielőtt elavulnak.

A refetchInterval Az opció egy olyan tulajdonság, amely megadja a React Query könyvtár egyes automatikus lekérési kérelmei közötti ezredmásodpercek számát.

Például:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 staleTime: 1000;
})

Ebben a példában a staleTime 1000 ezredmásodperc (1 másodperc). A lekért adatok 1 másodperc múlva elavulnak, majd a React Query könyvtár újabb lekérési kérelmet küld az API-nak.

Itt használja a refetchInterval lehetőség az egyes automatikus lekérési kérések közötti időintervallum szabályozására:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 újratöltési időköz: 6000;
})

A refetchInterval 6000 ezredmásodperc (6 másodperc). A React Query 6 másodperc elteltével automatikusan elindít egy új lekérési kérést a gyorsítótárazott adatok frissítésére.

A useMutation Hook megértése

A useMutation hook egy hatékony eszköz a React Query könyvtárban. Azt aszinkron műveletet hajt végre mutációk, például adatok létrehozása vagy frissítése a szerveren. Használni a useMutation hook segítségével könnyedén frissítheti az alkalmazás állapotát és felhasználói felületét a mutációra adott válasz alapján.

Az alábbiakban létrehoztunk egy AddPost komponens, amely a űrlap egy beviteli mezővel és egy elküldés gombbal. Ez az űrlapösszetevő a useMutation hook segítségével frissíti az állapotot:

import Reagál tól től'reagál'
funkcióAddPost() {
const[post, setPost] = React.useState({
 cím: ""
 })
funkciófogantyúChange(esemény) {
 setPost( (prevState) => ({
 ...prevState,
 [esemény.cél.név]: esemény.célérték
 }) )
 }
Visszatérés (



 típus="szöveg"
 helyőrző='Adj címet'
 név='cím'
 onChange={handleChange} 
 value={post.title}
 />
Bejegyzés hozzáadása</button>
 </form>
 )
}
exportalapértelmezett AddPost;

Benne AddPost komponens egy állapot hozzászólás amely egy tulajdonságú tárgyként szolgál, cím.

A fogantyúChange funkció frissíti az állapotot hozzászólás amikor a felhasználók beírják a beviteli mezőket. Miután létrehozta a AddPost komponenst, importáljuk a useMutation horog, és használja az API frissítéséhez.

Például:

import { useMutation } tól től"@tanstack/react-query"
import axiók tól től"axiók";
const newPostMutation = useMutation({
 mutációFn: async () => {
const válasz = várja axios.post('', {
 cím: post.title,
 });
const adat = válasz.adatok;
Visszatérés adat;
 }
 })

A useMutation hook kezeli az új bejegyzés létrehozására irányuló HTTP-kérést. A newPostMutation konstans a mutációs függvényt és annak konfigurációs lehetőségeit jelenti.

A mutációFn egy aszinkron függvény, amely POST kérést küld az API végpontnak. A kérés tartalmaz egy objektumot, amely tartalmazza a cím érték a hozzászólás tárgy.

Futtatni a mutációFn, fel kell hívnia a newPostMutation.mutate() módszer:

const handleSubmit = async (esemény) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
Visszatérés (


 típus="szöveg"
 helyőrző='Adj címet'
 név='cím'
 onChange={handleChange} 
 value={post.title}
 />
Bejegyzés hozzáadása</button>
 </form>
 )
}

Az űrlap elküldésével futni fog a handleSubmit funkció. A handleSubmit függvény egy aszinkron függvény, amely kiváltja a mutációs függvényt newPostMutation.mutate().

Hatékony adatlekérés Tanstack Query segítségével

Ez a cikk bemutatja, hogyan kezelheti az adatlekérést egy React alkalmazásban a tanstack/react-query könyvtár használatával.

A tanstack/react-query könyvtár hatékony és rugalmas eszközt biztosít az adatok lekéréséhez és gyorsítótárazásához a React alkalmazásokban. Könnyen használható, gyorsítótárazási képességei pedig hatékonyak és érzékenyek.

Akár egy kisebb személyes projektet, akár egy kiterjedt vállalati alkalmazást épít, a tanstack/react-query könyvtár segíthet az adatok hatékony és eredményes kezelésében és megjelenítésében. A React mellett a Next.js számos beépített folyamatot és harmadik féltől származó könyvtárat is biztosít az adatlekérés kezelésére.