使用useMutation和React Query發(fā)布數(shù)據(jù)demo
引言
我們已經(jīng)學(xué)習(xí)了在使用react query與服務(wù)器通信時如何使用useQuery和結(jié)構(gòu)化你的應(yīng)用程序。這次我們將學(xué)習(xí)如何以無縫的用戶體驗將數(shù)據(jù)發(fā)送到你的服務(wù)器。讓我們直接進入這個壞小子。
為什么使用突變？
與查詢非常不同，突變可以用來發(fā)布、刪除或更新你的數(shù)據(jù)與反應(yīng)查詢，甚至來自你的服務(wù)器的任何副作用。而useMutation是用來執(zhí)行這個的鉤子。
useMutation在行動中
按照腳手架指南中的層模式，我們將在我們的 api.js層中寫成
const addPlanet = async (data) => {
const { name } = data;
const body = { name };
return axiosInstance({
url: "planets",
method: "POST",
data: body,
}).then(({ data }) => {
return data;
});
};
一旦我們準備好了api層，我們就可以在我們的自定義鉤子中使用它了 鉤子.js作為
const useAddPlanet = () => {
const queryClient = useQueryClient();
queryClient.setMutationDefaults(["add-planet"], {
mutationFn: (data) => addPlanet(data),
onMutate: async (variables) => {
const { successCb, errorCb } = variables;
return { successCb, errorCb };
},
onSuccess: (result, variables, context) => {
if (context.successCb) {
context.successCb(result);
}
},
onError: (error, variables, context) => {
if (context.errorCb) {
context.errorCb(error);
}
},
});
return useMutation(["add-planet"]);
};
我們正在設(shè)置我們的突變默認值，第一個參數(shù)是查詢鍵，然后是我們的突變函數(shù)，就像我們在 react query 中做的那樣。這里的新成員是onMutate、onSuccess和onError：
- onMutate： 在突變時，可以用來處理請求過程中的一些副作用。
- onSuccess： 在成功時，用于在請求被成功送達時做一些改變。
- onError： 在錯誤發(fā)生時，用于處理你的請求失敗或讓我們說有一些錯誤，如404。
然后，我們用useMutation返回我們的突變與查詢鍵。
消耗我們的突變
現(xiàn)在要在我們的組件內(nèi)消耗我們的突變鉤子，我們可以做一些事情，如
const addPlanetMutation = useAddPlanet();
并在回調(diào)到我們的添加按鈕時，我們可以這樣做
// ADD PLANET
function handleAddPlanet() {
const planetName = newPlanetInput.current.value;
if (planetName === "") {
return;
}
const mutationArgs = {
name: newPlanetInput.current.value,
successCb,
errorCb,
};
addPlanetMutation.mutate(mutationArgs);
newPlanetInput.current.value = null;
}
我們已經(jīng)準備好了突變參數(shù)，作為mutationsArgs，在這些參數(shù)中，我們有成功和錯誤的回調(diào)，將在我們的自定義鉤子中調(diào)用。
成功和錯誤回調(diào)
在我們的錯誤回調(diào)中，我們可以添加一些警告或告知用戶他們剛剛提出的請求已經(jīng)失敗，在我們的成功回調(diào)中，我們獲取我們的數(shù)據(jù)。
什么是invalidateQueries？
當(dāng)我們試圖在一些副作用中再次獲取我們的數(shù)據(jù)時，Invalidate查詢就非常有用了。我們可以通過查詢鍵作為參數(shù)，告訴反應(yīng)查詢到底是哪個請求或哪個緩存的數(shù)據(jù)需要再次獲?。?/p>
const successCb = () => {
queryClient.invalidateQueries(["get-planets"]);
};
const errorCb = () => {};
無效查詢加載
一旦我們的查詢無效，我們就必須向用戶顯示某種指標，表明數(shù)據(jù)正在被獲取，這也是由react query提供的
const { data, isLoading, isFetching } = usePlanets();
isFetching是用來再次顯示加載器的，還有addPlanetMuttion.isLoading：
{isLoading || addPlanetMutation.isLoading || isFetching ? (
<InfinitySpin width="500" color="blue" />
) : (
// SHOW COMPONENT
)
bobs your uncle
以上就是使用useMutation和React Query發(fā)布數(shù)據(jù)demo的詳細內(nèi)容，更多關(guān)于useMutation React Query發(fā)布數(shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了如何在react項目中做公共配置文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
React實現(xiàn)導(dǎo)入導(dǎo)出Excel文件
本文主要介紹了React實現(xiàn)導(dǎo)入導(dǎo)出Excel文件，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
這篇文章主要為大家介紹了ReactProps的原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要為大家介紹了React的diff算法核心復(fù)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
React Native中的RefreshContorl下拉刷新使用
本篇文章主要介紹了React Native中的RefreshContorl下拉刷新使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
如何在 React 中調(diào)用多個 onClick 函數(shù)
這篇文章主要介紹了如何在React中調(diào)用多個onClick函數(shù),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了React?Native采用Hermes熱更新打包實戰(zhàn),在傳統(tǒng)的熱更新方案中，我們實現(xiàn)熱更新需要借助code-push開源方案，包括熱更新包的發(fā)布兩種方式詳解，感興趣的朋友一起看看吧2022-05-05
react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決
這篇文章主要介紹了react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決方案，具有很好的參考價值，希望對大家有所幫助。2022-08-08
最近,React 服務(wù)器組件受到了廣泛的關(guān)注和熱捧,這是因為 React 服務(wù)器組件允許開發(fā)人員將與組件相關(guān)的任務(wù)外包給服務(wù)器,在本文中,我們將討論什么是 React 服務(wù)器組件,以及如何將它們集成到構(gòu)建應(yīng)用程序中,需要的朋友可以參考下2023-10-10
ReactNative錯誤采集原理在Android中實現(xiàn)詳解
這篇文章主要為大家介紹了ReactNative錯誤采集原理在Android中實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02