'Skip' After changing, call api.util.resetApiState or api.internalActions removeQueryResult, and you cannot re-subscribe

[a6232241]

Hi,

Recently, I needed to implement a feature where pulling down on a list triggers resetApiState, clearing all data and refetching new data.

This works perfectly on the homepage. However, when I navigate to another page and then return to the homepage, the data refetching no longer works.

After testing, I found that the issue is related to the skip option in the query. The skip value is based on whether the page is focused. If I leave the homepage and return within the keepUnusedDataFor period, executing the same action no longer triggers the expected behavior.

I'm not sure if I missed something or if there's an issue with my implementation.

Here’s my code:

import {
  useIsFocused,
} from '@react-navigation/native';
import {
  useListSwiperQuery,
} from '../../store/api/queryApi';
import {api} from '../../store/api';
import {ScrollView, RefreshControl} from 'react-native';
import Carousel from '../../components/business/Carousel';
import {useDispatch} from 'react-redux';

const Home = () => {
  const isFocused = useIsFocused();
  const listSwiperQuery = useListSwiperQuery(
    {},
    {
      skip: !isFocused,
    },
  );
  const dispatch = useDispatch();
  const onRefresh = () => { dispatch(api.util.resetApiState()); }


  return (
    <ScrollView
        refreshControl={
          <RefreshControl refreshing={listSwiperQuery.isFetching} onRefresh={onRefresh} />
        }
        overScrollMode="never"
    >
         <Carousel data={listSwiperQuery?.data?.data} />
    </ScrollView>
  )

}

package.json dependencies:

"dependencies": {
    "@ajoelp/json-to-formdata": "1.5.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
    "@babel/plugin-proposal-optional-chaining": "7.21.0",
    "@expo/react-native-action-sheet": "4.0.1",
    "@gorhom/bottom-sheet": "4.5.1",
    "@gorhom/portal": "1.0.14",
    "@likashefqet/react-native-image-zoom": "2.1.1",
    "@react-native-async-storage/async-storage": "1.19.3",
    "@react-native-camera-roll/camera-roll": "6.0.0",
    "@react-native-clipboard/clipboard": "1.12.1",
    "@react-native-community/hooks": "3.0.0",
    "@react-native-community/netinfo": "11.2.1",
    "@react-native-picker/picker": "2.5.1",
    "@react-navigation/bottom-tabs": "6.5.11",
    "@react-navigation/devtools": "6.0.20",
    "@react-navigation/elements": "1.3.21",
    "@react-navigation/material-bottom-tabs": "6.2.19",
    "@react-navigation/material-top-tabs": "6.6.5",
    "@react-navigation/native": "6.1.9",
    "@react-navigation/native-stack": "6.9.16",
    "@reduxjs/toolkit": "2.5.1",
    "@rneui/base": "4.0.0-rc.8",
    "@rneui/themed": "4.0.0-rc.8",
    "aes-js": "3.1.2",
    "expo": "49.0.0",
    "expo-updates": "0.18.19",
    "jcore-react-native": "2.1.5",
    "jpush-react-native": "3.0.6",
    "lodash": "4.17.21",
    "moment": "2.29.4",
    "numeral": "2.0.6",
    "openinstall-react-native": "1.7.2",
    "patch-package": "8.0.0",
    "qs": "6.11.2",
    "react": "18.2.0",
    "react-airplay": "1.2.0",
    "react-native": "0.72.6",
    "react-native-config": "1.5.1",
    "react-native-dev-menu": "4.1.1",
    "react-native-device-info": "10.11.0",
    "react-native-exit-app": "2.0.0",
    "react-native-fast-image": "8.6.3",
    "react-native-flipper": "0.164.0",
    "react-native-fs": "2.20.0",
    "react-native-gesture-handler": "2.13.3",
    "react-native-hash": "3.0.3",
    "react-native-image-picker": "7.0.2",
    "react-native-linear-gradient": "2.8.3",
    "react-native-pager-view": "6.2.2",
    "react-native-paper": "5.11.0",
    "react-native-permissions": "4.1.5",
    "react-native-qrcode-svg": "6.3.2",
    "react-native-reanimated": "3.6.0",
    "react-native-reanimated-carousel": "3.5.1",
    "react-native-render-html": "6.3.4",
    "react-native-safe-area-context": "4.7.3",
    "react-native-screens": "3.27.0",
    "react-native-shake": "5.6.2",
    "react-native-sound": "0.11.2",
    "react-native-svg": "13.14.0",
    "react-native-swipe-list-view": "3.2.9",
    "react-native-tab-view": "3.5.2",
    "react-native-vector-icons": "10.0.0",
    "react-native-video": "5.2.1",
    "react-native-view-shot": "3.8.0",
    "react-redux": "8.1.3",
    "react-use": "17.4.0",
    "redux-flipper": "2.0.2",
    "redux-persist": "6.0.0",
    "use-debounce": "9.0.4"
  },

Any insights on what might be causing this issue? Thanks in advance!