骞惰璇锋眰鍜屼緷璧栬姹傚啓鍦ㄥ墠闈㈢敱浜庡浗鍐呮瘮杈冪郴缁熺殑react-query鏁欑▼寰堝皯锛屾墍浠ヤ綔鑰呯粨鍚堝畼鏂规枃妗ｅ拰瀹樻柟璇剧▼锛屽笇鏈涜兘鍐欎竴涓洿鍏ㄩ潰鐨勬暀绋嬨€傛湰鏂囧皢浠ュ悇绉嶅疄渚嬩负鍒囧叆鐐癸紝瀵圭浉鍏崇煡璇嗙偣杩涜灏藉彲鑳介€氫織鏄撴噦鐨勮瑙ｃ€傚鏈夐敊璇紝璇峰湪璇勮鍖烘寚鍑猴紝浣滆€呬細绗竴鏃堕棿鏀规銆傚唴瀹逛粙缁峳eact-query鏇存柊浜?022-06-04娣卞害鏌ヨ閿拰鏌ヨ鍑芥暟鏇存柊浜?022-06-08骞惰璇锋眰鍜屼緷璧栬姹傛洿鏂颁簬2022-06-19鏌ヨ缁撴灉缂撳瓨鐘舵€佸拰璋冭瘯宸ュ叿鏇存柊浜?022-06-192022-06-23鏇存柊骞惰璇锋眰浠€涔堟槸骞惰璇锋眰锛熷湪鏃ュ父寮€鍙戜腑锛屽墠绔姹傚悗绔帴鍙ｆ椂锛岄€氬父浼氳姹傚涓帴鍙ｃ€備緥濡備笅闈㈢殑react-query浠ｇ爜锛歝onstusersQuery=useQuery(['users'],fetchUsers)constteamsQuery=useQuery(['teams'],fetchTeams)constprojectsQuery=useQuery(['projects'],fetchProjects)鐨勪笂闈㈢殑渚嬪瓙锛岃姹備簡鐢ㄦ埛鍒楄〃銆佸洟闃熷垪琛ㄥ拰椤圭洰鍒楄〃銆傛鏃舵帴鍙ｈ姹傛槸骞惰璇锋眰锛屽悇涓姹備箣闂翠簰涓嶅共鎵帮紙涔熷彲浠ュ湪鏁版嵁搴撴煡璇紝GoogleParallelQueries涓煡鐪嬬浉鍏虫蹇碉級銆傝皝鍏堣姹傛暟鎹紝灏辨樉绀哄摢涓€椤规暟鎹€傚亣璁剧幇鍦ㄦ湁涓€涓渶姹傦細鍒嗗埆灞曠ずgithub鐢ㄦ埛鐨勪粨搴撳拰浠ｇ爜鐗囨鍒楄〃锛屾鏃舵垜浠渶瑕佽姹備袱涓帴鍙ｈ幏鍙栫敤鎴蜂粨搴撳垪琛細https://api.github.com/users/{username}/repos鑾峰彇鐢ㄦ埛浠ｇ爜鐗囨鍒楄〃锛歨ttps://api.github.com/users/{username}/gists鍚屾椂鍚戣繖涓や釜鎺ュ彛鍙戣捣璇锋眰锛屽摢涓帴鍙ｅ厛杩斿洖鏁版嵁锛屽苟鏄剧ず鐨勬暟鎹叾涓帴鍙ｏ細馃憠馃徎鐐规垜鏌ョ湅鍦ㄧ嚎demoimport{useQuery}from"react-query";constReposAndGists=({username})=>{constreposQuery=useQuery(["repos",username],()=>{returnfetch(`https://api.github.com/users/${username}/repos`).then((res)=>res.json())});constgistQuery=useQuery(["gists",username],()=>{returnfetch(`https://api.github.com/users/${username}/gists`).then((res)=>res.json())});return(

);};鍙︿竴绉嶆儏鍐垫槸浣犳兂鍚堝苟涓や釜鎺ュ彛鐨勮姹傦紝鐒跺悗鍦ㄤ袱涓帴鍙ｉ兘杩斿洖鏁版嵁鐨勬椂鍊欐妸鍐呭鏄剧ず缁欑敤鎴枫€傚湪鏌ヨ鍑芥暟涓娇鐢≒romise銆俛llMerge涓€浜涗袱涓姹傚亣璁剧幇鍦ㄦ湁涓€涓渶姹傦細鍚屾椂鏄剧ずgithub鐢ㄦ埛浠撳簱鍜屼唬鐮佺墖娈靛垪琛紝姝ゆ椂鍚庡彴娌℃湁鏂版帴鍙ｏ紝闇€瑕佸鐢ㄥ師鏉ョ殑鑰佹帴鍙ｏ細鑾峰彇鐢ㄦ埛浠撳簱鍒楄〃锛歨ttps://api.github.com/users/{username}/repos鑾峰彇鐢ㄦ埛浠ｇ爜鐗囨鍒楄〃锛歨ttps://api.github.com/users/{username}/gists瑕佹眰鏄瓑鍒版墍鏈夌殑鍦ㄥ皢鏁版嵁鎻愪緵缁欑敤鎴锋樉绀哄唴瀹逛箣鍓嶈繑鍥炴暟鎹€傛鏃堕渶瑕佷娇鐢≒romise.all鏉ュ悎骞惰姹傘€傦紙ps锛氳繕璁板緱琚墜鍐橮ormise.all鏀厤鐨勬亹鎯у悧锛変笅闈㈡槸绀轰緥浠ｇ爜锛屽悓鏃朵互github鐨勭敤鎴峰悕涓哄弬鏁帮紝璇锋眰鐢ㄦ埛鐨勪粨搴撳垪琛ㄥ拰浠ｇ爜鐗囨鍒楄〃馃憠鐐规垜鏌ョ湅鍦ㄧ嚎婕旂ずimport*asReactfrom'react';import{useQuery}from'react-query';constgetReposAndGists=(username)=>{returnPromise.all([fetch(`https://api.github.com/users/${username}/repos`).then((res)=>res.json()),fetch(`https://api.github.com/users/${username}/gists`).then((res)=>res.json()),]);};constReposAndGists=({username})=>{constreposAndGistQuery=useQuery(['reposAndGists',username],()=>getReposAndGists(username));if(reposAndGistsQuery.isLoading){return

姝ｅ湪鍔犺浇鏁版嵁...

;}if(reposAndGistsQuery.isError){return

鏁版嵁鍔犺浇閿欒锛歿reposAndGistsQuery.error.message}

;}if(!reposAndGistsQuery.data){returnnull;}const[repos,gists]=reposAndGistsQuery.data;return();};瀵煎嚭榛樿鐨凴eposAndGists;浣跨敤useQuery鍙戣捣璇锋眰濡傛灉闇€瑕佸姩鎬佺敓鎴愯姹傦紝浣犱細鍙戠幇鍦ㄧ幇鏈夌殑hooks瑙勫垯涓嬩娇鐢╱seQuery鏄棤娉曞疄鐜拌繖涓渶姹傜殑銆傛墍浠eact-query鎻愪緵浜唘seQueries鏉ヨВ鍐宠繖涓棶棰樸€傚湪涓嬮潰鐨勪唬鐮佷腑锛屾垜浠彲浠ラ殢鎰忎慨鏀规暟缁勭殑鍐呭锛屾鏃秗eact-query浼氫骇鐢熶笉鍚岀殑璇锋眰锛氫笅闈㈢殑渚嬪瓙涓紝棣栧厛鎵归噺璇锋眰鑾峰彇鏁扮粍涓互涓嬬敤鎴风殑鎵€鏈変粨搴揫'facebook','vuejs','nestjs','mongdb']锛岀偣鍑绘寜閽悗锛岄噸鏂版壒閲忚幏鍙栦笅闈㈢敤鎴穂'microsoft','tesla']鐨勪粨搴擄紝闈炲父鏂逛究鐨勫姩鎬佽姹傘€傪煈夝煆荤偣鎴戞煡鐪嬪湪绾挎紨绀?,'vuejs','nestjs','mongodb',]);constgetRepos=(username)=>fetch(`https://api.github.com/users/${username}/repos`).then((res)=>res.json());constuserQueries=useQueries({queries:users.map((user)=>{return{queryKey:['user',user],queryFn:()=>getRepos(user),};}),});return();}渚濊禆璇锋眰浠€涔堟槸渚濊禆璇锋眰锛熷亣璁剧幇鍦ㄦ湁涓€涓渶姹傦細缁欑敤鎴峰睍绀烘渶鏂扮殑鍐呭璇︽儏锛屼絾鏄幇瀹炴槸鍚庡彴鍙彁渚涗簡涓€涓垪琛ㄧ晫闈㈠拰涓€涓鎯呯晫闈紝鍊掑簭鎺掑垪锛屾病鏈夋椂闂寸粰浣犳柊鐨勭晫闈€傝繖鏃朵竴涓彲浠ユ兂鍒扮殑鏂规鏄細鑾峰彇鍒楄〃鐣岄潰鐨勭涓€涓暟鎹甶d锛岀劧鍚庤姹傝鎯呴〉鎺ュ彛锛屽皢鑾峰彇鍒扮殑璇︽儏灞曠ず缁欑敤鎴枫€傝繖绉嶆儏鍐垫槸渚濊禆浜庤姹傜殑锛岃姹侭鎺ュ彛鐨勬煇涓弬鏁颁緷璧栦簬A鎺ュ彛璇锋眰杩斿洖鐨勫唴瀹广€備笅闈㈣繕鏄敤github鎺ュ彛缁欏ぇ瀹跺睍绀轰竴涓渶姹傦細鑾峰彇react浠撳簱鏍囩鍒楄〃涓殑绗簩涓爣绛撅紝璇锋眰杩欎釜鏍囩鐨刬ssue鍒楄〃銆傪煈夝煆荤偣鎴戞煡鐪嬪湪绾挎紨绀篿mport*asReactfrom'react';浠?react-query'瀵煎叆{useQuery}锛沜onstIssueLabelFilter=({owner,repo})=>{constlabelsQuery=useQuery(['repos',owner,repo,'labels'],()=>fetch(`https://api.github.com/repos/${owner}/${repo}/labels`).then((res)=>res.json()));constlabels=labelsQuery.data;constissuesQuery=useQuery(['repos',owner,repo,'issues'],()=>fetch(`https://api.github.com/repos/${owner}/${repo}/issues?labels=${labels[1].name}`).then((res)=>res.json()),{/***璇ラ厤缃」涓簍rue鏃讹紝浼氳Е鍙戞帴鍙ｈ姹傘€?鎵€浠ュ綋绗竴涓帴鍙ｈ姹傝繑鍥炴椂锛屾鏃堕厤缃」鐨勮〃杈惧紡涓虹湡*浼氳Е鍙戝github涓璱ssue鍒楄〃鐨勮姹?鈶?/enabled:!!labels,});return();};瀵煎嚭榛樿鍑芥暟App(){return();}鍦╮eact-query涓紝褰撶粍浠跺姞杞藉畬鎴愬悗锛岀粍浠朵腑鐨剈seQuery浼氬紑濮嬭姹傦紝姝ゆ椂鏄剧劧涓嶇鍚堣姹傘€傞渶姹傜殑瑕佹眰鏄姞杞芥爣绛惧垪琛ㄥ悗鑾峰彇绗簩涓爣绛撅紝鐒跺悗寮€濮嬭姹傞棶棰樺垪琛ㄣ€傛墍浠ラ渶瑕佷娇鐢╱seQuery鐨別nabled鍙傛暟銆傚綋鍙傛暟鍊间负false鏃讹紝灏嗙姝㈣姹傛帴鍙ｃ€傜幇鍦ㄥ洖鍒颁笂闈㈢殑渚嬪瓙锛屽綋labelsQuery璇锋眰娌℃湁缁撴灉鏃讹紝labels鍙橀噺鍊兼槸undefined锛屾鏃朵唬鐮佲憼琛屼腑鐨勫€间负false锛屽綋labelsQuery璇锋眰缁撴潫鏃讹紝labels鍙橀噺鍊兼槸涓€涓暟缁勶紝姝ゆ椂鍦ㄢ憼浠ｇ爜琛屼腑鐨勫€间负true锛宨ssuesQuery寮€濮嬭姹傛暟鎹€傚畬鍏ㄦ弧瓒宠姹傜殑瑕佹眰銆傛敼鍠勪緷璧栨煡璇㈡帴鍙ｄ竴鐩村姞杞界殑闂涓婁緥涓紝issuesQuery鍔犺浇瀹屾垚鍚庯紝鐢变簬琚鐢紙閰嶇疆椤筫nabled:false锛夛紝isLoading浼氫竴鐩翠负true鐘舵€侊紝鈥嬧€嬬洿鍒癷ssuesQuery璇锋眰瀹屾垚鏁版嵁鍙樹负閿欒鐨勩€傝繖绉嶆彁绀轰細寰堝鎬€傛槑鏄巌ssuesQuery鍦ㄤ竴娈垫椂闂村唴娌℃湁鐪熸鐨勮姹傛暟鎹紝涓轰粈涔堟€绘槸鍦╨oading閫夐」鍗′腑鏄剧ず...鐨勫唴瀹瑰憿锛熻В鍐虫柟妗堟槸锛氶渶瑕佷竴涓瓧娈垫潵鍖哄垎鏌ヨ鍑芥暟褰撳墠娌℃湁璇锋眰鏁版嵁锛屽浜庨挀楸肩姸鎬併€傚湪useQuery涓紝褰揻etchStatus瀛楁涓篿dle鏃讹紝琛ㄧず褰撳墠鏌ヨ鍑芥暟娌℃湁杩愯锛屽浜巉ishing鐘舵€乛^fetchStatus鏈変笁绉嶇姸鎬侊紝fetchStatus琛ㄧず褰撳墠鏌ヨ鍑芥暟姝ｅ湪杩愯锛宨dlestate琛ㄧず鏌ヨ鍑芥暟褰撴椂娌℃湁杩愯銆傛殏鍋滅姸鎬佽〃绀烘煡璇㈠姛鑳藉皾璇曡繍琛岋紝浣嗘棤娉曞彂鍑鸿姹傘€傛渶鍙兘鐨勫師鍥犳槸瀹冨浜庤劚鏈虹姸鎬侊紝鍥犱负娌℃湁浜掕仈缃戣繛鎺ャ€傪煈夝煆荤偣鎴戞煡鐪嬪湪绾挎紨绀篿mport*asReactfrom'react';import{useQuery}from'react-query';import'./style.css';constIssueLabelFilter=({owner,repo})=>{constlabelsQuery=useQuery(['repos',owner,repo,'labels'],()=>fetch(`https://api.github.com/repos/${owner}/${repo}/labels`).then((res)=>res.json()));constlabels=labelsQuery.data;constissuesQuery=useQuery(['repos',owner,repo,'issues'],()=>fetch(`https://api.github.com/repos/${owner}/${repo}/issues?labels=${labels[1].name}`).then((res)=>res.json()),{enabled:!!labels,//馃憟馃徎鉂楋笍鉂楋笍鉂楋笍褰撹繖涓厤缃」鐨勫€间负true锛屽皢瑙﹀彂鎺ュ彛璇锋眰銆傚洜姝わ紝褰撶涓€涓帴鍙ｈ姹傝繑鍥炴椂锛屾鏃堕厤缃」鐨勮〃杈惧紡涓簍rue锛屼細瑙﹀彂瀵筭ithub涓璱ssue鍒楄〃鐨勮姹倉);return(