redux-toolkit
redux-toolkit copied to clipboard
RTK Query stuck at isFetching always "true"
I check isFetching with RTk Query and add the loading component accordingly, but sometimes when I experience internet problems (such as the internet suddenly cutting off), isFetching remains true forever. Even if I close and reopen the application, it doesn't work. How can I go about this? Here is the code:
import { View, Text, Pressable } from "react-native"
import { useGetApiKnittingHallMasterHallsQuery } from "../../api/generatedAlpinApi"
import { useEffect, useState } from "react";
import { useNotify } from "../../hooks";
import { Button, HallData, PlantData } from "../../components/ui";
import { useAppSelector } from "../../store";
import LottieView from "lottie-react-native";
import classNames from "classnames";
const Productivity = () => {
const notify = useNotify();
const { user, auth } = useAppSelector((x) => x.user)
const [hallDatas, setHallDatas] = useState([]);
const getHalls = useGetApiKnittingHallMasterHallsQuery(undefined, { pollingInterval: 60000, refetchOnMountOrArgChange: true });
useEffect(() => {
if (!getHalls.data || !getHalls.data.data) {
// notify({
// title: "Hata!",
// description: "Bağlantı hatası.",
// color: "error"
// })
setHallDatas([])
return;
}
setHallDatas(getHalls.data.data)
}, [getHalls.data])
return (
<View className="flex flex-1 h-full bg-[#28313E] dark: dark:bg-neutral-800" >
{getHalls.isFetching ? (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<LottieView
style={{ width: 300, height: 300 }}
source={require("../../assets/animations/loading.json")}
autoPlay
loop
/>
</View>
) : (
<View className={classNames("flex flex-1 flex-row bg-[#28313E] mb-10 dark: dark:bg-neutral-800",
{ "mt-20": getHalls?.data?.data.length === 6 || getHalls?.data?.data.length < 6 }
)}>
<View className={classNames("flex-2 flex-col justify-center items-center", {
"mt-14": getHalls?.data?.data.length === 8
})}>
{hallDatas.length > 0 && (
<View className="flex-1 justify-center items-center">
<PlantData data={hallDatas[0]} />
<Button
isBlock
onPress={() => {
getHalls.refetch()
}}
label="Tazele"
color="primary"
disabled={getHalls.isFetching}
/>
</View>
)}
</View>
<View className="h-full" >
<View style={{ marginRight: 310 }} className="flex-4 flex-row flex-wrap justify-center">
{hallDatas.map((value, index) => {
return <HallData key={index} data={value} />;
})}
</View>
</View>
</View>
)
}
</View >
)
}
export { Productivity }