react-navigation에서 화면을 이동할 때 revalidate usesWR을 생각할 때의 이야기

expo에서usesWR을 이용하여 통신할 때react-navigation의 페이지를 이동할 때 캐시를 뛰어넘으려 해도 잘 안 되는 것 같아서 적어 두었습니다.
아마react-query 등 윈도우일 거예요.일반적으로 이것은 포커스가 처리에 참여하는 대체적으로 공통된 방법이라고 여긴다

🙅안 되는 예

const SomeScreenComponent = () => {
  const {data, error} = useSWR("/api/list/some", fetcher, { 
    revalidateOnFocus: true, revalidateOnMount: true, refreshWhenHidden: true 
  })
  return <View>
    {/*  ... */}
  </View>
}

revalidateOnMount와refreshWhenHidden 등을 시도했지만 react-navigation으로서의 활동은 모두 시작되지 않은 것 같다.
그리고 useEffect를 깨끗이 치우면 되나요?그렇게 생각하지만 라우팅 방법에 따라 제대로 진행되지 않는 경우도 있어

const SomeScreenComponent = () => {
  const {data, error, revalidate} = useSWR("/api/list/some", fetcher, { 
    revalidateOnFocus: true, revalidateOnMount: true, refreshWhenHidden: true 
  })
  const handleClenup = () => {
    revalidate()
  }
  useEffect(() => {
    return () => {
      handleClenup()
    }
  },[])
  return <View>
    {/*  ... */}
  </View>
}

🙆 OK의 예: react-navigation 측면의useIsFocued()와 조합

그래서 조합useIsFocused을 결정했다.만약 그렇다면, 네비게이션이focus에서 벗어났다는 것을 깨달았을 때,revalidate를 드리겠습니다

const SomeScreenComponent = () => {
  const isFocused = useIsFocused() 
  const {data, error, revalidate} = useSWR("/api/list/some", fetcher, { 
    revalidateOnFocus: true, revalidateOnMount: true, refreshWhenHidden: true 
  })
  const handleClenup = () => {
    revalidate()
  }
  useEffect(() => {
    if(!isFocused){
      handleClenup()
    }
    return () => {
      handleClenup()
    }
  },[])
  return <View>
    {/*  ... */}
  </View>
}

그렇다면 마음대로 움직일 수 있을 거야.원래는usesWR을 통과하지 않고useEffect에서fetch를 하면 되지만,이 경우에도isFocued를 활용할 필요가 있다.
또 깊은 검증useFocusEffect은 없지만 사용도 순조롭게 진행될 것으로 보인다.
useFocus Effect는 useCallback과 조합해야 합니다.

useFocusEffect(useCallback(() => {
  return () => { // cleanup関数として定義すると、blutのタイミングで実行される
    handleClenup()
  }
}))

react-query의 경우는?

아마도 같은 처리가 필요할 것이다.remove로 전화하시면 됩니다.

const {data, error, remove} = useQuery("/api/list/some", fetcher)
const handleClenup = () => {
  remove()
}

기타 해법

SWR이든 react-query든 각자 비슷한 프로그램을 라이브러리화하는 것을 사용하죠.
내용을 살펴본 느낌인데 자기 사용이 너무 심해서 이번에는 피했어요.

https://github.com/nandorojo/swr-react-native

https://github.com/cherniavskii/react-query-navigation-native