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

Cannot refetch a query that has not been started yet

Open sanduluca opened this issue 9 months ago • 6 comments

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) image

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>
  );
}

sanduluca avatar Apr 29 '24 06:04 sanduluca