창 포커스 시 다시 가져오기

사용자가 애플리케이션을 떠났다가 돌아왔을 때 쿼리 데이터가 stale 상태라면 TanStack Query 백그라운드에서 자동으로 최신 데이터를 요청합니다. refetchOnWindowFocus 옵션을 사용하여 이를 전역 또는 쿼리별로 비활성화할 수 있습니다.

전역적으로 비활성화하기

//
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // default: true
    },
  },
})

function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}

쿼리별로 비활성화하기

useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
  refetchOnWindowFocus: false,
})

사용자 지정 창 포커스 이벤트

드문 경우지만 TanStack Query의 재검증을 트리거하는 창 포커스 이벤트를 직접 관리하고 싶을 수 있습니다. 이를 위해 TanStack Query는 창에 포커스가 맞춰질 때 실행해야 하는 콜백을 제공하고 자체 이벤트를 설정할 수 있게 해주는 focusManager.setEventListener 함수를 제공합니다. focusManager.setEventListener를 호출하면 이전에 설정한 핸들러(대부분의 경우 기본 핸들러)가 제거되고 새 핸들러가 대신 사용됩니다. 예를 들어 다음은 기본 핸들러입니다:

focusManager.setEventListener((handleFocus) => {
  // Listen to visibilitychange
  if (typeof window !== 'undefined' && window.addEventListener) {
    const visibilitychangeHandler = () => {
      handleFocus(document.visibilityState === 'visible')
    }
    window.addEventListener('visibilitychange', visibilitychangeHandler, false)
    return () => {
      // Be sure to unsubscribe if a new handler is set
      window.removeEventListener('visibilitychange', visibilitychangeHandler)
    }
  }
})

React Native에서 포커스 관리하기

window의 이벤트 리스너 대신 React Native는 AppState 모듈을 통해 포커스 정보를 제공합니다. 앱 상태가 "active"로 변경될 때 업데이트를 트리거하려면 AppState "change" 이벤트를 사용할 수 있습니다:

import { AppState } from 'react-native'
import { focusManager } from '@tanstack/react-query'

function onAppStateChange(status: AppStateStatus) {
  if (Platform.OS !== 'web') {
    focusManager.setFocused(status === 'active')
  }
}

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

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

포커스 상태 관리

import { focusManager } from '@tanstack/react-query'

// Override the default focus state
focusManager.setFocused(true)

// Fallback to the default focus check
focusManager.setFocused(undefined)