[TanStakQuery] React Native

React Query는 현재 React DOM에서만 지원되는 개발 도구를 제외하고 React Native에서 즉시 작동하도록 설계되었습니다.

서드 파티 Flipper 플러그인을 사용할 수 있습니다: https://github.com/bgaleotti/react-query-native-devtools.

서드 파티 Reactotron 플러그인을 사용할 수 있습니다: https://github.com/hsndmr/reactotron-react-query

내장된 devtools를 플랫폼에 구애받지 않도록 만드는 데 도움을 주고 싶으시다면 알려주세요!

온라인 상태 관리(Online status management)

React Query는 이미 웹 브라우저에서 재접속 시 자동 리페치를 지원합니다. React Native에서 이 동작을 추가하려면 아래 예제에서와 같이 React Query onlineManager를 사용해야 합니다:

import NetInfo from '@react-native-community/netinfo'
import { onlineManager } from '@tanstack/react-query'

onlineManager.setEventListener(setOnline => {
  return NetInfo.addEventListener(state => {
    setOnline(!!state.isConnected)
  })
})

화면 초점 새로 고침(Refresh on Screen focus)

어떤 상황에서는 React Native 화면이 다시 포커싱될 때 쿼리를 refetch하고 싶을 수 있습니다. 이 커스텀 훅은 화면이 다시 포커싱될 때, 제공된 refetch 함수를 호출합니다.

import React from 'react'
import { useFocusEffect } from '@react-navigation/native'

export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
  const firstTimeRef = React.useRef(true)

  useFocusEffect(
    React.useCallback(() => {
      if (firstTimeRef.current) {
         firstTimeRef.current = false;
         return;
      }

      refetch()
    }, [refetch])
  )
}

위 코드에서, useFocusEffect는 화면 포커스와 더불어 마운트 시 콜백을 호출하기 때문에 처음에 refetch를 건너뜁니다.

Reference

• React Native | TanStack Query Docs