redux-toolkit icon indicating copy to clipboard operation
redux-toolkit copied to clipboard

RTK Query stuck at isFetching always "true"

Open atalayio opened this issue 7 months ago • 4 comments

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 } 

atalayio avatar Jul 04 '24 16:07 atalayio