Tanstack Query jeb AKA React Query ir populāra bibliotēka datu iegūšanai React lietojumprogrammās. React Query vienkāršo datu ielādes, saglabāšanas kešatmiņā un atjaunināšanas procesu tīmekļa lietojumprogrammās. Šajā rakstā tiks apspriesta React Query izmantošana datu iegūšanai React lietojumprogrammā.

React Query instalēšana un iestatīšana

Varat instalēt React Query, izmantojot npm vai dziju. Lai to instalētu, izmantojot npm, terminālī palaidiet šādu komandu:

npm i @tanstack/react-query

Lai to instalētu, izmantojot dziju, terminālī palaidiet šādu komandu:

dzija pievienot @tanstack/react-query

Pēc React Query bibliotēkas instalēšanas visu lietojumprogrammu iesaiņojat QueryClientProvider komponents. The QueryClientProvider komponents aptver visu jūsu lietojumprogrammu un nodrošina gadījuma piemēru QueryClient visiem tā bērnu komponentiem.

The QueryClient ir React Query centrālā daļa. The QueryClient

pārvalda visu datu iegūšanas un kešatmiņas loģiku. The QueryClientProvider komponents aizņem QueryClient kā rekvizītu un padara to pieejamu pārējai jūsu lietojumprogrammai.

Lai izmantotu QueryClientProvider un QueryClient savā lietojumprogrammā tie ir jāimportē no @tanstack/react-query bibliotēka:

imports Reaģēt no'reaģēt';
imports ReactDOM no'react-dom/client';
imports App no'./Lietotne';
imports { QueryClientProvider, QueryClient } no"@tanstack/react-query";
konst queryClient = jauns QueryClient();
ReactDOM.createRoot(dokumentu.getEementd('sakne')).render(



 </QueryClientProvider>
 </React.StrictMode>
)

Izpratne par useQuery Hook

The useQuery hook ir funkcija, ko nodrošina React Query bibliotēka, kas ienes datus no servera vai API. Tas pieņem objektu ar šādām īpašībām: queryKey (vaicājuma atslēga) un queryFn (funkcija, kas atgriež solījumu, kas atrisina datus, kurus vēlaties ienest).

The queryKey identificē vaicājumu; tam ir jābūt unikālam katram vaicājumam jūsu lietojumprogrammā. Atslēga var būt jebkura vērtība, piemēram, virkne, objekts vai masīvs.

Lai iegūtu datus, izmantojot useQuery āķis, jums tas jāimportē no @tanstack/react-query bibliotēka, caurlaide a queryKey un izmantojiet queryFn lai iegūtu datus no API.

Piemēram:

imports Reaģēt no'reaģēt';
imports axios no"aksios";
imports { useQuery } no"@tanstack/react-query";
funkcijuMājas() {
konst postQuery = useQuery({
 queryKey: ['ziņas'],
 queryFn: asinhrons () => {
konst atbilde = gaidīt axios.get(' https://jsonplaceholder.typicode.com/posts');
konst dati = gaidīt atbilde.dati;
atgriezties dati;
 }
 })
ja( postQuery.isLoading ) atgriezties ( <h1>Notiek ielāde...h1>)
ja( postQuery.isError ) atgriezties (<h1>Ielādējot datus, radās kļūda!!!h1>)

atgriezties (



Mājas</h1>
 { postQuery.data.map( (lieta) => ( <lpptaustiņu={item.id}>{item.title}lpp>)) }
 </div>
 )
}
eksportētnoklusējuma Mājas;

The useQuery hook atgriež objektu, kas satur informāciju par vaicājumu. The postQuery objekts satur Notiek ielāde, isError, un ir veiksme štatos. The Notiek ielāde, isError, un ir veiksme valstis pārvalda datu izguves procesa dzīves ciklu. The postQuery.data rekvizīts satur datus, kas iegūti no API.

The Notiek ielāde statuss ir Būla vērtība, kas norāda, vai vaicājums pašlaik ielādē datus. Kad Notiek ielāde stāvoklis ir patiess, vaicājums tiek veikts, un pieprasītie dati nav pieejami.

The isError statuss ir arī Būla vērtība, kas norāda, vai datu izguves laikā radās kļūda. Kad isError ir taisnība, vaicājumam neizdevās izgūt datus.

The ir veiksme statuss ir Būla vērtība, kas norāda, vai vaicājums ir veiksmīgi izguvis datus. Kad ir veiksme ir taisnība, varat parādīt lietojumprogrammā izgūtos datus.

Ņemiet vērā, ka varat piekļūt queryKey izmantojot queryFn. The queryFn ņem vienu argumentu. Šis arguments ir objekts, kas satur API pieprasījumam nepieciešamos parametrus. Viens no šiem parametriem ir queryKey.

Piemēram:

useQuery({
 queryKey: ['ziņas'],
 queryFn: asinhrons (obj) => {
konsole.log( obj.queryKey );
 }
 })

Darbs ar novecojušiem datiem

Reaģēšanas vaicājums nodrošina daudzus veidus, kā rīkoties ar novecojušiem datiem. Bibliotēka React Query nodrošina, ka jūsu API automātiski tiek veikts jauns ielādes pieprasījums, kad ienestie dati kļūst novecojuši. Tas garantē, ka jūs pastāvīgi renderējat visjaunākos datus.

Varat kontrolēt, cik ātri jūsu dati kļūst novecojuši, un laika intervālu starp katru automātiskās ielādes pieprasījumu, izmantojot novecojis laiks un ielādes intervāls iespējas. The novecojis laiks Opcija ir rekvizīts, kas norāda, cik milisekundēs kešatmiņā saglabātie dati ir derīgi, pirms tie kļūst novecojuši.

The ielādes intervāls opcija ir rekvizīts, kas norāda milisekunžu skaitu starp katru React Query bibliotēkas automātiskās ielādes pieprasījumu.

Piemēram:

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

Šajā piemērā novecojis laiks ir 1000 milisekundes (1 sekunde). Ienestie dati kļūs novecojuši pēc 1 sekundes, un pēc tam React Query bibliotēka API iesniegs citu ielādes pieprasījumu.

Šeit jūs izmantojat ielādes intervāls iespēja kontrolēt laika intervālu starp katru automātiskās ielādes pieprasījumu:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 ielādes intervāls: 6000;
})

The ielādes intervāls ir 6000 milisekundes (6 sekundes). Reakcijas vaicājums automātiski aktivizēs jaunu ielādes pieprasījumu, lai atjauninātu kešatmiņā saglabātos datus pēc 6 sekundēm.

Mutācijas āķa lietošanas izpratne

The UseMutation hook ir spēcīgs rīks React Query bibliotēkā. Tas veic asinhrono darbību mutācijas, piemēram, datu izveide vai atjaunināšana serverī. Izmantojot UseMutation āķis, varat viegli atjaunināt lietojumprogrammas stāvokli un lietotāja interfeisu, pamatojoties uz mutācijas reakciju.

Zemāk mēs esam izveidojuši AddPost komponents, kas padara a veidlapa ar ievades lauku un iesniegšanas pogu. Šis veidlapas komponents izmantos āķi useMutation, lai atjauninātu stāvokli:

imports Reaģēt no'reaģēt'
funkcijuAddPost() {
konst[post, setPost] = React.useState({
 virsraksts: ""
 })
funkcijurokturisMainīt(notikumu) {
 setPost( (prevState) => ({
 ...prevState,
 [notikuma.mērķa.nosaukums]: event.target.value
 }) )
 }
atgriezties (



 tips="teksts"
 vietturis='Pievieno nosaukumu'
 vārds ='nosaukums'
 onChange={handleChange} 
 value={post.title}
 />
Pievienot ziņu</button>
 </form>
 )
}
eksportētnoklusējuma AddPost;

Iekšpusē AddPost sastāvdaļa ir stāvoklis pastu kas kalpo kā objekts ar vienu īpašumu, virsraksts.

The rokturisMainīt funkcija atjaunina stāvokli pastu ikreiz, kad lietotāji ieraksta ievades laukos. Pēc izveidošanas AddPost komponentu, mēs importējam UseMutation āķi un izmantojiet to, lai atjauninātu API.

Piemēram:

imports { useMutation } no"@tanstack/react-query"
imports axios no"aksios";
konst newPostMutation = useMutation({
 mutācijaFn: asinhrons () => {
konst atbilde = gaidīt axios.post('', {
 virsraksts: post.title,
 });
konst dati = atbilde.dati;
atgriezties dati;
 }
 })

The UseMutation hook apstrādā HTTP pieprasījumu, lai izveidotu jaunu ziņu. The newPostMutation konstante apzīmē mutācijas funkciju un tās konfigurācijas opcijas.

The mutācijaFn ir asinhrona funkcija, kas nosūta POST pieprasījumu API galapunktam. Pieprasījumā ir iekļauts objekts, kas satur virsraksts vērtība no pastu objektu.

Lai palaistu mutācijaFn, jums būs jāzvana uz newPostMutation.mutate() metode:

konst HandSubmit = asinhrons (pasākums) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
atgriezties (


 tips="teksts"
 vietturis='Pievieno nosaukumu'
 vārds ='nosaukums'
 onChange={handleChange} 
 value={post.title}
 />
Pievienot ziņu</button>
 </form>
 )
}

Iesniedzot veidlapu, tiks palaists rokturisIesniegt funkciju. The rokturisIesniegt funkcija ir asinhrona funkcija, kas aktivizē mutācijas funkciju newPostMutation.mutate().

Efektīva datu ienešana, izmantojot Tanstack vaicājumu

Šajā rakstā ir apskatīts, kā apstrādāt datu ienešanu React lietojumprogrammā, izmantojot tanstack/react-query bibliotēku.

Tanstack/react-query bibliotēka nodrošina jaudīgu un elastīgu rīku datu iegūšanai un saglabāšanai kešatmiņā React lietojumprogrammās. To ir viegli lietot, un kešatmiņas iespējas padara to efektīvu un atsaucīgu.

Neatkarīgi no tā, vai veidojat nelielu personisku projektu vai plašu uzņēmuma lietojumprogrammu, tanstack/react-query bibliotēka var palīdzēt pārvaldīt un parādīt datus efektīvi un produktīvi. Līdzās React, Next.js nodrošina arī vairākus iebūvētus procesus un trešo pušu bibliotēkas, lai apstrādātu datu ienešanu.