绫荤洰浠嬬粛react-query宸蹭簬2022-06-04鏇存柊娣卞叆鏌ヨ閿拰鏌ヨ鍑芥暟宸蹭簬2022-鏇存柊06-08骞惰璇锋眰鍜屼緷璧栬姹傛洿鏂颁簬2022-06-082022-06-19鏇存柊鏌ヨ缁撴灉缂撳瓨鐘舵€佸拰璋冭瘯宸ュ叿鏇存柊浜?022-06-23鐗堟湰璇存槑鏈暀绋嬪熀浜巖eact-query缂栧啓@4鐗堟湰锛岀洰鍓?2022-06-08)鏄痑lpha鐗堟湰銆傜嚎涓奷emo鏄熀浜巗tackblitz骞冲彴querykeyFAQ鏌ヨkey鐨勫€间笉鑳介噸澶嶏紝闇€瑕佸敮涓€銆傛兂璞′竴涓嬭繖鏍风殑鍦烘櫙銆俵ocalStorage涓缃簡浠ヤ笅鏁版嵁銆傜洰鐨勬槸浠serID涓簁ey灏嗗綋鍓嶇敤鎴锋暟鎹繚瀛樺湪缂撳瓨涓璫onstuserId=1;localStorage.setItem(userId,{username:'fed-orange'})鐒跺悗浠roductId涓簁ey淇濆瓨鍐呭ofaproductinthecacheconstproductId=1;localStorage.setItem(productId,{name:'orange'})姝ゆ椂浣犱細鍙戠幇淇濆瓨鍒發ocalStorage鍙繚瀛樹簡浣犲悗闈㈢紦瀛樼殑鍊笺€傚悓鏍凤紝鍦╮eact-query涓紝濡傛灉杩欐牱鍋氾紝涔熶細閬囧埌杩欐牱鐨勯棶棰樿姹傜敤鎴锋暟鎹甤onstusersQuery=useQuery([userId],fetchUsers);璇锋眰鍟嗗搧鏁版嵁constproductsQuery=useQuery([productId],fetchProducts);濡傛灉褰搖serId鍜宲roductId鐩稿悓鏃讹紝鍚庨潰璇锋眰鐨勬暟鎹細瑕嗙洊鍓嶉潰璇锋眰鐨勬暟鎹紒杩欎釜闂鐨勮В鍐虫柟娉曟槸锛氬彲浠ュ湪鏁扮粍鐨勭涓€涓厓绱犱腑鏀句竴涓瓧绗︿覆鏉ユ爣璇嗗綋鍓嶇殑鏁版嵁绫诲瀷锛堝彲浠ュ弬鑰冧綔鑰呬箣鍓嶆彁鍒扮殑璁捐鏌ヨ閿殑灏忓缓璁殑鍐呭锛夛紝灏卞彲浠ヤ簡瑙ｅ喅杩欎釜闂銆俢onstusersQuery=useQuery(['users',userId],fetchUsers);constproductsQuery=useQuery(['products',productId],fetchProducts);杩欐牱鍋氫笉浠呭彲浠ユ洿濂藉湴缂栧啓鏌ヨ閿紝鑰屼笖鍦ㄨ皟璇曟暟鎹殑杩囩▼涓紝鍦―evTools涓紝浣犲彲浠ヨ交鏉惧尯鍒嗕笉鍚岀殑鏁版嵁锛堜笉瑕佺粰鑷繁鎸栧潙锛屽湪DevTools涓紝鎵€鏈夌紦瀛樼殑鏁版嵁閮藉垪鍑轰簡鏌ヨ閿綔涓虹淮搴︼級锛佹煡璇㈠嚱鏁版煡璇㈠嚱鏁颁娇鐢ㄤ竴涓皬濡欐嫑銆傜浉淇″湪鍓嶉潰鐨勪粙缁嶄腑锛屽ぇ瀹剁殑鎬濊矾鍙兘閮藉眬闄愬湪浜嗘煡璇㈠姛鑳戒笂銆傚彧鑳戒娇鐢╢etch锛堟垨鑰卆xios绛夊簱锛夋潵璋冪敤http鎺ュ彛銆備絾瀹為檯涓婏紝鎵€鏈夌殑Promise鍑芥暟閮藉彲浠ヤ綔涓烘煡璇㈠嚱鏁般€傛瘮濡傛祻瑙堝櫒涓殑寮傛API鎺ュ彛鈥斺€旇幏鍙栧綋鍓嶄綅缃殑API锛屽彲浠ュ皝瑁呮垚涓€涓煡璇㈠嚱鏁般€俢onstgetLocation=async()=>newPromise((resolve,reject)=>{navigator.geolocation.getCurrentPosition(resolve,reject);});鐒跺悗鍦╱seQuery涓娇鐢ㄤ笂闈㈢殑鏌ヨ鍑芥暟鏌ョ湅stackblitz涓婄殑渚嬪瓙1馃憞馃徎import*asReactfrom'react';import{useQuery}from'react-query';exportdefaultfunctionApp(){constgetLocation=async()=>newPromise((resolve,reject)=>{navigator.geolocation.getCurrentPosition(resolve,reject);});constlocationQuery=useQuery(['location'],getLocation);return(

);}鑷畾涔塰ook灏佽浜唕eact-query鐨勬煡璇㈣姹傚湪鍓嶉潰鐨勪緥瀛愪腑寰堝璇锋眰閮芥槸闈炲父绠€鍗曪紝鍙湪涓€涓湴鏂逛娇鐢紝鎵€浠ユ垜浠笉闇€瑕佸皝瑁呬唬鐮併€備絾鏄鏋滆姹傛湰韬秹鍙婂埌闈炲父澶嶆潅鐨勫鐞嗭紝骞朵笖鍙兘琚涓粍浠跺鐢紝鎴戜滑鍙堝洖鍒板師鐐癸紝鍙戠幇闇€瑕佸鍒剁矘璐村緢澶氶噸澶嶇殑浠ｇ爜锛佷絾鏄竴鏃︽湁浜嗚繖绉嶆兂娉曪紝灏辨槸涓囨伓涔嬫簮銆備竴鏃﹁繖鏍峰仛锛屽悗鏈熺殑缁存姢鎴愭湰灏变細澶уぇ澧炲姞銆備慨鏀逛竴涓湴鏂癸紝灏卞緱鎶婄被浼肩殑浠ｇ爜鍏ㄩ儴鏀逛竴閬嶏紝璐规椂璐瑰姏锛佷笅闈㈡垜浠皢鍓嶉潰璇锋眰浠撳簱闂鐨勪緥瀛愭彁鍙栧埌涓€涓嚜瀹氫箟鐨勯挬瀛愪腑銆傝繖鏄疓ithub涓璦pi鐨勭浉鍏虫枃妗ｃ€傛湁鍏磋叮鐨勫悓瀛﹀彲浠ヨ嚜琛屽弬鑰冿細issuesapidocumentation銆傚鏋滀綘鎯虫墿灞曠浉鍏冲姛鑳斤紝娆㈣繋鍒皊tackblitzfork鍚庤嚜宸辫瘯璇曘€傛垜浠湅涓€涓嬪墠闈㈢殑鏌ヨ鍑芥暟constfetchData=({queryKey})=>{const[,owner,repo]=queryKey;returnfetch(`https://api.github.com/repos/${owner}/${repo}/issues`,{headers:{Authorization:'',},}).then(async(response)=>{//濡傛灉璇锋眰杩斿洖鐨勭姸鎬佷笉鏄?00锛屽垯浼氭姏鍑哄悗绔敊璇痠f(response.status!==200){const{message}=awaitresponse.json();thrownewError(message);}杩斿洖response.json();});};鎺ヤ笅鏉ユ垜浠畾涔変竴涓悕涓簎seGithubIssuesQuery鐨勯挬瀛恑mport{useQuery}from'react-query';constuseGithubIssuesQuery=({owner,repo})=>{constfetchData=({queryKey})=>{const[,owner,repo]=queryKey;returnfetch(`https://api.github.com/repos/${owner}/${repo}/issues`,{headers:{Authorization:'',},}).then(async(response)=>{//濡傛灉璇锋眰杩斿洖鐘舵€佷笉鏄?00锛屽皢鎶涘嚭鍚庣閿欒if(response.status!==200){const{message}=awaitresponse.json();thrownewErr鎴栵紙娑堟伅锛夛紱}杩斿洖response.json();});};returnuseQuery(['issues',owner,repo],fetchData);};瀵煎嚭榛樿useGithubIssuesQuery;鎮ㄩ渶瑕佸仛鐨勫氨鏄娇鐢╱seGithubIssuesQuery鎸傞挬骞朵紶鍏wner鍜宺epo鍙傛暟銆備綘涓嶉渶瑕佸叧蹇冨叾浠栦竴鍒囥€傚鏋滈渶瑕佸湪鍏朵粬缁勪欢涓姹備粨搴搃ssue鐩稿叧鐨勬帴鍙ｏ紝鍙渶浣跨敤useGithubIssuesQueryhook骞跺湪鍚庨潰娣诲姞璇ュ嚱鏁帮紝鍙渶瑕佹壘鍒板搴旂殑鑷畾涔塰ook骞惰繘琛岀浉鍏充慨鏀瑰嵆鍙紝澶уぇ鎻愰珮浜嗗紑鍙戞晥鐜囥€傚綋澶氫釜缁勪欢寮曠敤鐩稿悓key鍊肩殑鏁版嵁鏃讹紝react-query涓嶄細杩涜澶氭璇锋眰锛屽ぇ瀹跺彲浠ユ斁蹇冧娇鐢紒Summaryquerykey璇蜂繚璇佹煡璇ey鐨勫敮涓€鎬с€傚鏋滄湁閲嶅鐨勬煡璇㈤敭锛屼細瀵艰嚧鏁版嵁瑕嗙洊闂銆傛煡璇㈤敭鐨勮璁″彲浠ラ伒寰粠涓€鑸埌鍏蜂綋鐨勮鍒欍€傜涓€涓厓绱犲彲浠ユ槸鎻忚堪鏁版嵁绫诲瀷鐨勫瓧绗︿覆銆俼uerykey鐨勫厓绱犲彲浠ユ槸strings,numbers,embedded褰搎uerykey鐨刟rrays鍜宱bjects鐨勯泦鍚堝彂鐢熷彉鍖栨椂锛堝寘鎷琽bject鐨勫彉鍖栵紝react-query浼氳繘琛屾繁搴︽瘮杈冿級锛宺eact-query浼氳皟鐢╭uery鍑芥暟鍐嶆銆傛煡璇㈠嚱鏁版煡璇㈠嚱鏁板彲浠ユ槸浠讳綍Promise鍑芥暟锛屽寘鎷絾涓嶉檺浜嶧etch銆乤xios銆乬raphqlrequest銆佸紓姝ユ祻瑙堝櫒api绛夊缓璁紝瀵逛簬闇€瑕佸鏉傚鐞嗐€佸澶勪娇鐢ㄧ殑璇锋眰锛屽皝瑁呰嚜瀹氫箟hooks锛屾彁楂樺紑鍙戞晥鐜?