使用useMutation和React Query发布数据demo
引言
我们已经学习了在使用react query与服务器通信时如何使用useQuery和结构化你的应用程序。这次我们将学习如何以无缝的用户体验将数据发送到你的服务器。让我们直接进入这个坏小子。
为什么使用突变？
与查询非常不同，突变可以用来发布、删除或更新你的数据与反应查询，甚至来自你的服务器的任何副作用。而useMutation是用来执行这个的钩子。
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"]);
};
我们正在设置我们的突变默认值，第一个参数是查询键，然后是我们的突变函数，就像我们在 react query 中做的那样。这里的新成员是onMutate、onSuccess和onError：
- onMutate： 在突变时，可以用来处理请求过程中的一些副作用。
- onSuccess： 在成功时，用于在请求被成功送达时做一些改变。
- onError： 在错误发生时，用于处理你的请求失败或让我们说有一些错误，如404。
然后，我们用useMutation返回我们的突变与查询键。
消耗我们的突变
现在要在我们的组件内消耗我们的突变钩子，我们可以做一些事情，如
const addPlanetMutation = useAddPlanet();
并在回调到我们的添加按钮时，我们可以这样做
// 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;
}
我们已经准备好了突变参数，作为mutationsArgs，在这些参数中，我们有成功和错误的回调，将在我们的自定义钩子中调用。
成功和错误回调
在我们的错误回调中，我们可以添加一些警告或告知用户他们刚刚提出的请求已经失败，在我们的成功回调中，我们获取我们的数据。
什么是invalidateQueries？
当我们试图在一些副作用中再次获取我们的数据时，Invalidate查询就非常有用了。我们可以通过查询键作为参数，告诉反应查询到底是哪个请求或哪个缓存的数据需要再次获取：
const successCb = () => {
queryClient.invalidateQueries(["get-planets"]);
};
const errorCb = () => {};
无效查询加载
一旦我们的查询无效，我们就必须向用户显示某种指标，表明数据正在被获取，这也是由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发布数据demo的详细内容，更多关于useMutation React Query发布数据的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了如何在react项目中做公共配置文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了React实现导入导出Excel文件，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要为大家介绍了ReactProps的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
这篇文章主要为大家介绍了React的diff算法核心复用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
React Native中的RefreshContorl下拉刷新使用
本篇文章主要介绍了React Native中的RefreshContorl下拉刷新使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了如何在React中调用多个onClick函数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了React Native采用Hermes热更新打包实战,在传统的热更新方案中，我们实现热更新需要借助code-push开源方案，包括热更新包的发布两种方式详解，感兴趣的朋友一起看看吧2022-05-05
react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决
这篇文章主要介绍了react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决方案，具有很好的参考价值，希望对大家有所帮助。2022-08-08
最近,React 服务器组件受到了广泛的关注和热捧,这是因为 React 服务器组件允许开发人员将与组件相关的任务外包给服务器,在本文中,我们将讨论什么是 React 服务器组件,以及如何将它们集成到构建应用程序中,需要的朋友可以参考下2023-10-10
ReactNative错误采集原理在Android中实现详解
这篇文章主要为大家介绍了ReactNative错误采集原理在Android中实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最新评论