使用useMutation和React Query发布数据demo
作者:Jovie
引言
我们已经学习了在使用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发布数据的资料请关注脚本之家其它相关文章!