reactQuery pass state isLoading to button when refetch

Question

I try to pass isLoading state to button prop when click button which trigger refetch function from useQuery, and it doesn't work (maybe because it re-render component and when component render isLoading is false). I wonder how i can make it works?

const MainPage: React.FC = () => {

    const {data, isLoading,  error, refetch} = useQuery<any>(
        ["getCity"],
        () => fetchCities(),
        {
                enabled: false,
            }
        )

    return (
        <div>
            <div>
                {JSON.stringify(data)}
            </div>
            <Button
                    loading={isLoading} //  always false. Need to be true when start refetch and false by the end refetch
                    label="get_cities"
                    onClick={() => refetch()}
            >

            </Button>
        </div>

    )
}

export default MainPage;

Is it false, when you try load the data for the first time as well? — Aashay Amballi
– Aashay Amballi, Commented Jul 3, 2022 at 16:18

Chanandrei · Accepted Answer · 2022-07-04 02:13:18Z

4

isLoading will become true only when query has no data and is currently fetching while isFetching will become true if the query is fetching at any time (including background refetching).

In your case, just use isFetching instead of isLoading

const { isLoading, isFetching } = useQuery(...);

if(isLoading){
    return <div>Loading cities...</div>
}

return <Button
    loading={isFetching}
    label="get_cities"
    onClick={() => refetch()}
>

edited Jul 4, 2022 at 2:13

answered Jul 4, 2022 at 2:08

Chanandrei

2,4313 gold badges13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

reactQuery pass state isLoading to button when refetch

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related