redux-toolkit
redux-toolkit copied to clipboard
Cannot refetch a query that has not been started yet
We have some crashes reported in our app with the message "Cannot refetch a query that has not been started yet.". We see the crashed in Firebase Crashlytics. I could not repeat the the crash myself. I searched here the issues with the same problem, but could not find a possible solution . The closest related issue seems to be #2889
Here is the crash stats for Android (we have the same and for iOS)
Here is the screen code example we have:
Example Screen 1
import { useState } from "react";
import { ScrollView } from "react-native";
import Barcode from "react-native-barcode-builder";
import { Layout, Header } from "components";
import RefreshControl from "components/core/RefreshControl";
import ErrorDataLoad from "components/ErrorDataLoad";
import { useGetInfoQuery } from "store/info";
export function Screen() {
const [isRefreshing, setIsRefreshing] = useState(false);
const { data, isLoading, error, refetch } = useGetInfoQuery(
undefined,
{
refetchOnMountOrArgChange: true,
}
);
const onRefresh = () => {
setIsRefreshing(true);
refetch().finally(() => setIsRefreshing(false));
};
return (
<Layout.Screen>
<Header title="" />
<ScrollView
contentContainerStyle={{ flex: 1 }}
refreshControl={
<RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
}
>
{isLoading ? (
<LoadingOverlay />
) : error ? (
<ErrorDataLoad
retry={onRefresh}
message={error.message || ""}
isRefreshing={isRefreshing}
/>
) : data ? (
<Layout.Block flex={1} align="center">
<Barcode
value={barCodeValue}
format="CODE128"
text={barCodeValue}
/>
</Layout.Block>
) : null}
</ScrollView>
</Layout.Screen>
);
}
Example Screen 2
import { useState } from "react";
import { FlatList, View } from "react-native";
import { RatingCell, Layout, Header } from "components";
import RefreshControl from "components/core/RefreshControl";
import { useGetRatingGroupsQuery, useGetRatingQuery } from "store/rating";
import { LoadingOverlay } from "components/LoadingOverlay";
import ErrorDataLoad from "components/ErrorDataLoad";
export function RatingScreen() {
const {
data: rating,
error: ratingError,
isLoading: isLoadingRating,
refetch: refetchRating,
} = useGetRatingQuery(undefined, { refetchOnMountOrArgChange: true });
const {
data: ratingGroups,
error: ratingGroupError,
isLoading: isLoadingRatingGroup,
refetch: refetchRatingGroup,
} = useGetRatingGroupsQuery(undefined, { refetchOnMountOrArgChange: true });
const [isRefreshing, setIsRefreshing] = useState(false);
const onRefresh = () => {
setIsRefreshing(true);
Promise.all([refetchRating(), refetchRatingGroup()]).finally(() => {
setIsRefreshing(false);
});
};
const error = ratingError || ratingGroupError;
const isLoading = isLoadingRating || isLoadingRatingGroup;
return (
<Layout.Screen>
<Header title="" />
{isLoading ? (
<LoadingOverlay />
) : error ? (
<View style={{ paddingVertical: 16, flex: 1 }}>
<ErrorDataLoad
retry={onRefresh}
message={error.message || ""}
isRefreshing={isRefreshing}
/>
</View>
) : rating && ratingGroups && ? (
<>
<FlatList
data={ratingList}
style={{ paddingHorizontal: 20 }}
renderItem={({ item }) => <RatingCell {...item} />}
refreshControl={
<RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
}
/>
</>
) : null}
</Layout.Screen>
);
}