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

4
onlineManager.setEventListener(setOnline => {
5
  return NetInfo.addEventListener(state => {
6
    setOnline(!!state.isConnected)
7
  })
8
})

1
import { useEffect } from 'react'
2
import { AppState, Platform } from 'react-native'
3
import type { AppStateStatus } from 'react-native'
4
import { focusManager } from '@tanstack/react-query'
5

6
function onAppStateChange(status: AppStateStatus) {
7
  if (Platform.OS !== 'web') {
8
    focusManager.setFocused(status === 'active')
9
  }
10
}
11

12
useEffect(() => {
13
  const subscription = AppState.addEventListener('change', onAppStateChange)
14

15
  return () => subscription.remove()
16
}, [])

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

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

7
  useFocusEffect(
8
    React.useCallback(() => {
9
      if (firstTimeRef.current) {
10
        firstTimeRef.current = false
11
        return
12
      }
13

14
      refetch()
15
    }, [refetch]),
16
  )
17
}

1
import React from 'react'
2
import { NotifyOnChangeProps } from '@tanstack/query-core'
3
import { useFocusEffect } from '@react-navigation/native'
4

5
export function useFocusNotifyOnChangeProps(notifyOnChangeProps?: NotifyOnChangeProps) {
6
  const focusedRef = React.useRef(true)
7

8
  // 여기
9
  useFocusEffect(
10
    React.useCallback(() => {
11
      focusedRef.current = true
12

13
      return () => {
14
        focusedRef.current = false
15
      }
16
    }, []),
17
  )
18

19
  return () => {
20
    if (!focusedRef.current) {
21
      return []
22
    }
23

24
    if (typeof notifyOnChangeProps === 'function') {
25
      return notifyOnChangeProps()
26
    }
27

28
    return notifyOnChangeProps.current
29
  }
30
}

1
function MyComponent() {
2
  const notifyOnChangeProps = useFocusNotifyOnChangeProps()
3

4
  const { dataUpdatedAt } = useQuery({
5
    queryKey: ['myKey'],
6
    queryFn: async () => {
7
      const response = await fetch('https://api.github.com/repos/tannerlinsley/react-query')
8
      return response.json()
9
    },
10
    notifyOnChangeProps,
11
  })
12

13
  return <div>DataUpdatedAt: {dataUpdatedAt}</div>
14
}