Танстацк Куери, АКА Реацт Куери, је популарна библиотека за преузимање података у Реацт апликацијама. Реацт Куери поједностављује процес преузимања, кеширања и ажурирања података у веб апликацијама. У овом чланку ће се расправљати о коришћењу Реацт Куерија за руковање дохваћањем података у Реацт апликацији.

Инсталирање и подешавање Реацт Куери-а

Можете инсталирати Реацт Куери користећи нпм или иарн. Да бисте га инсталирали користећи нпм, покрените следећу команду у свом терминалу:

нпм и @танстацк/реацт-куери

Да бисте га инсталирали помоћу пређе, покрените следећу команду у свом терминалу:

иарн адд @танстацк/реацт-куери

Након инсталирања библиотеке Реацт Куери, целу апликацију умотавате у КуериЦлиентПровидер саставни део. Тхе КуериЦлиентПровидер компонента обавија целу вашу апликацију и обезбеђује инстанцу КуериЦлиент на све његове подређене компоненте.

Тхе КуериЦлиент је централни део Реацт Куерија. Тхе

КуериЦлиент управља свом логиком преузимања и кеширања података. Тхе КуериЦлиентПровидер компонента узима КуериЦлиент као реквизит и чини га доступним остатку ваше апликације.

Да бисте искористили КуериЦлиентПровидер анд тхе КуериЦлиент у вашој апликацији, морате их увести из @танстацк/реацт-куери библиотека:

увоз Реаговати из'реаговати';
увоз РеацтДОМ из'реацт-дом/цлиент';
увоз Апликација из'./Апликација';
увоз { КуериЦлиентПровидер, КуериЦлиент } из'@танстацк/реацт-куери';
конст куериЦлиент = Нова КуериЦлиент();
РеацтДОМ.цреатеРоот(документ.гетЕементд('корен')).дати, пружити(



 </QueryClientProvider>
 </React.StrictMode>
)

Разумевање усеКуери Хоок-а

Тхе усеКуери хоок је функција коју обезбеђује библиотека Реацт Куери, која преузима податке са сервера или АПИ-ја. Прихвата објекат са следећим својствима: куериКеи (кључ упита) и куериФн (функција која враћа обећање које се решава за податке које желите да преузмете).

Тхе куериКеи идентификује упит; мора бити јединствен за сваки упит у вашој апликацији. Кључ може бити било која вредност, као што је стринг, објекат или низ.

Да бисте преузели податке помоћу усеКуери кука, потребно је да је увезете из @танстацк/реацт-куери библиотека, проћи а куериКеи и користите куериФн да преузмете податке из АПИ-ја.

На пример:

увоз Реаговати из'реаговати';
увоз акиос из'акиос';
увоз { усеКуери } из'@танстацк/реацт-куери';
функцијаКућа() {
конст постКуери = усеКуери({
 куериКеи: ['постови'],
 куериФн: асинц () => {
конст одговор = чекати акиос.гет(' https://jsonplaceholder.typicode.com/posts');
конст подаци = чекати респонсе.дата;
повратак подаци;
 }
 })
ако( постКуери.исЛоадинг ) повратак ( <х1>Учитавање...х1>)
ако(постКуери.исЕррор) повратак (<х1>Грешка при учитавању података!!!х1>)

повратак (



Хоме</h1>
 { постКуери.дата.мап( (предмет) => ( <стркључ={итем.ид}>{итем.титле}стр>)) }
 </div>
 )
}
извозУобичајено Кућа;

Тхе усеКуери хоок враћа објекат који садржи информације о упиту. Тхе постКуери објекат садржи исЛоадинг, исЕррор, и исСуццесс државе. Тхе исЛоадинг, исЕррор, и исСуццесс државе управљају животним циклусом процеса преузимања података. Тхе постКуери.дата својство садржи податке преузете из АПИ-ја.

Тхе исЛоадинг стање је логичка вредност која показује да ли упит тренутно учитава податке. Када исЛоадинг стање је тачно, упит је у току, а тражени подаци су недоступни.

Тхе исЕррор стање је такође логичка вредност која показује да ли је дошло до грешке током преузимања података. Када исЕррор је тачно, упит није успео да преузме податке.

Тхе исСуццесс стање је логичка вредност која показује да ли је упит успешно преузео податке. Када исСуццесс Истина, можете приказати податке преузете у вашој апликацији.

Имајте на уму да можете приступити куериКеи помоћу куериФн. Тхе куериФн узима један аргумент. Овај аргумент је објекат који садржи параметре потребне за АПИ захтев. Један од ових параметара је куериКеи.

На пример:

усеКуери({
 куериКеи: ['постови'],
 куериФн: асинц (обј) => {
конзола.лог( обј.куериКеи);
 }
 })

Рад са застарелим подацима

Реацт упит пружа много начина да се носите са застарелим подацима. Библиотека Реацт Куери осигурава да аутоматски направи нови захтев за преузимање вашем АПИ-ју када преузети подаци постану застарели. Ово гарантује да стално приказујете најажурније податке.

Можете да контролишете колико брзо ваши подаци постају застарели и временски интервал између сваког захтева за аутоматско преузимање користећи сталеТиме и рефетцхИнтервал Опције. Тхе сталеТиме опција је својство које одређује број милисекунди у којима су кеширани подаци важећи пре него што постану застарели.

Тхе рефетцхИнтервал опција је својство које специфицира број милисекунди између сваког захтева за аутоматско преузимање Реацт Куери библиотеке.

На пример:

усеКуери({
 куериКеи: ['...'],
 куериФн: () => {...},
 сталеТиме: 1000;
})

У овом примеру, сталеТиме је 1000 милисекунди (1 секунда). Преузети подаци ће постати застарели након 1 секунде, а затим ће библиотека Реацт Куери упутити још један захтев за преузимање АПИ-ју.

Овде користите рефетцхИнтервал опција за контролу временског интервала између сваког захтева за аутоматско преузимање:

усеКуери({
 куериКеи: ['...'],
 куериФн: () => {...},
 РефетцхИнтервал: 6000;
})

Тхе рефетцхИнтервал је 6000 милисекунди (6 секунди). Реацт Куери ће аутоматски покренути нови захтев за преузимање за ажурирање кешираних података након 6 секунди.

Разумевање употребе Мутатион Хоок-а

Тхе усеМутатион хоок је моћан алат у библиотеци Реацт Куери. То врши асинхрони рад мутације, као што је креирање или ажурирање података на серверу. Помоћу усеМутатион кука, можете лако ажурирати стање апликације и кориснички интерфејс на основу одговора на мутацију.

У наставку смо креирали АддПост компонента која чини а образац са пољем за унос и дугметом за слање. Ова компонента обрасца ће користити куку усеМутатион за ажурирање стања:

увоз Реаговати из'реаговати'
функцијаАддПост() {
конст[пост, сетПост] = Реацт.усеСтате({
 наслов: ""
 })
функцијахандлеЦханге(догађај) {
 сетПост( (превСтате) => ({
 ...превСтате,
 [евент.таргет.наме]: евент.таргет.валуе
 }) )
 }
повратак (



 типе="текст"
 плацехолдер='Додати наслов'
 наме='титле'
 онЦханге={хандлеЦханге} 
 валуе={пост.титле}
 />
Додај објаву</button>
 </form>
 )
}
извозУобичајено АддПост;

Унутар АддПост компонента је стање пошта који служи као објекат са једним својством, наслов.

Тхе хандлеЦханге функција ажурира стање пошта кад год корисници укуцају у поља за унос. Након креирања АддПост компоненту, увозимо усеМутатион закачите и користите га за ажурирање АПИ-ја.

На пример:

увоз { усеМутатион } из'@танстацк/реацт-куери'
увоз акиос из'акиос';
конст невПостМутатион = усеМутатион({
 мутација Фн: асинц () => {
конст одговор = чекати акиос.пост('', {
 наслов: пост.титле,
 });
конст подаци = одговор.подаци;
повратак подаци;
 }
 })

Тхе усеМутатион хоок обрађује ХТТП захтев за креирање новог поста. Тхе невПостМутатион константа представља функцију мутације и њене опције конфигурације.

Тхе мутатионФн је асинхрона функција која шаље ПОСТ захтев АПИ крајњој тачки. Захтев укључује објекат који садржи наслов вредност од пошта објекат.

Да бисте покренули мутатионФн, мораћете да позовете невПостМутатион.мутате() метод:

конст хандлеСубмит = асинц (догађај) => { 
 евент.превентДефаулт();
 невПостМутатион.мутате();
}
повратак (


 типе="текст"
 плацехолдер='Додати наслов'
 наме='титле'
 онЦханге={хандлеЦханге} 
 валуе={пост.титле}
 />
Додај објаву</button>
 </form>
 )
}

Подношењем обрасца ће се покренути хандлеСубмит функција. Тхе хандлеСубмит функција је асинхрона функција која покреће функцију мутације невПостМутатион.мутате().

Ефикасно преузимање података са Танстацк упитом

Овај чланак истражује како руковати дохваћањем података у Реацт апликацији помоћу библиотеке танстацк/реацт-куери.

Библиотека танстацк/реацт-куери пружа моћан и флексибилан алат за преузимање и кеширање података у Реацт апликацијама. Једноставан је за употребу, а његове могућности кеширања чине га ефикасним и брзим.

Било да градите мали лични пројекат или обимну пословну апликацију, библиотека танстацк/реацт-куери може вам помоћи да ефикасно и ефикасно управљате подацима и приказујете их. Заједно са Реацт-ом, Нект.јс такође пружа неколико уграђених процеса и библиотека трећих страна за руковање дохваћањем података.