使用useMutation和React Query發(fā)布數(shù)據(jù)demo
引言
我們已經(jīng)學習了在使用react query與服務(wù)器通信時如何使用useQuery和結(jié)構(gòu)化你的應(yīng)用程序。這次我們將學習如何以無縫的用戶體驗將數(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？
當我們試圖在一些副作用中再次獲取我們的數(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 路由懶加載的幾種實現(xiàn)方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
react基于react-slick實現(xiàn)多圖輪播效果
React slick是一個使用React構(gòu)建的輪播組件,下面這篇文章主要給大家介紹了關(guān)于react基于react-slick實現(xiàn)多圖輪播效果的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
React使用Hooks從服務(wù)端獲取數(shù)據(jù)的完整指南
本文將從基礎(chǔ)到高級用法,詳細介紹如何在 React 項目中優(yōu)雅地使用 Hooks 進行服務(wù)端數(shù)據(jù)獲取,涵蓋錯誤處理、加載狀態(tài)、性能優(yōu)化等核心場景,并提供可直接復用的代碼模板,需要的朋友可以參考下2025-03-03
小編需要封裝一個通過Popover彈出框里可以自定義渲染內(nèi)容的組件，渲染內(nèi)容暫時有: 單選框, 復選框，接下來通過本文給大家分享React封裝CustomSelect組件思路,需要的朋友可以參考下2022-07-07
React+Typescript創(chuàng)建項目的實現(xiàn)步驟
通過React組件庫和TypeScript的強類型特性,開發(fā)者可以創(chuàng)建出具有優(yōu)秀用戶體驗和穩(wěn)定性的Web應(yīng)用程序,本文主要介紹了React+Typescript創(chuàng)建項目的實現(xiàn)步驟,感興趣的可以了解一下2023-08-08
useEffect是react?v16.8新引入的特性。我們可以把useEffect?hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個函數(shù)的組合2022-11-11
這篇文章主要為大家詳細介紹了react實現(xiàn)復選框全選和反選組件效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
React Hook useState useEffect componentD
這篇文章主要介紹了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
評分插件在購物的應(yīng)用中經(jīng)常可以看得到，但是用著別人的總是沒有自己寫的順手，本文就使用React實現(xiàn)星星評分組件，感興趣的可以了解一下2021-06-06
React?createRef循環(huán)動態(tài)賦值ref問題
這篇文章主要介紹了React?createRef循環(huán)動態(tài)賦值ref問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01