react native : Stop an automatic refetch when screen is unmounted

Question

我正在使用 React-native 和 React-query，我想在屏幕卸载时停止自动重新获取。

目前，当我转到目标屏幕时，我会调用一个带有间隔参数的查询:

const { data: mission } = useMissionFetcher(missionSelectedId, 5000)

使用任务 getter :

export const useMissionFetcher = (idMission: string, interval: number): QueryResult<MissionMobile> => {
    const missionsQueryFn = () => getMission(idMission)
        return useQuery([QueryKeys.mission, idMission], missionsQueryFn, {
          ...baseReactQueryConfig,
          refetchInterval: interval,
        })
  }

基础 react 查询配置:

export const baseReactQueryConfig = {
    refetchOnWindowFocus: false,
    staleTime: Infinity,

如何在退出屏幕时停止重新获取？

Answer 1

我认为您使用 navigate 来离开当前屏幕，并且不会卸载屏幕。使用 navigation.replace 并且你的 react query refetch 会自动停止，因为它会被垃圾化(或者如果你愿意，可以卸载)