React Native | TanStack Query React Docs

React Native

React Query 设计为可与 React Native 开箱即用。

开发者工具支持

React Native 开发者工具有多种集成选项：

原生 macOS 应用：一个第三方应用，用于在任何基于 js 的应用程序中调试 React Query： https://github.com/LovesWorking/rn-better-dev-tools
Flipper 插件：一个供 Flipper 用户使用的第三方插件： https://github.com/bgaleotti/react-query-native-devtools
Reactotron 插件：一个供 Reactotron 用户使用的第三方插件： https://github.com/hsndmr/reactotron-react-query

在线状态管理

React Query 已支持在 Web 浏览器中重新连接时自动重新获取。要在 React Native 中添加此行为，您必须使用 React Query onlineManager，如下例所示：

tsx

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

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

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

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

或者

tsx

import { onlineManager } from '@tanstack/react-query'
import * as Network from 'expo-network'

onlineManager.setEventListener((setOnline) => {
  const eventSubscription = Network.addNetworkStateListener((state) => {
    setOnline(!!state.isConnected)
  })
  return eventSubscription.remove
})

import { onlineManager } from '@tanstack/react-query'
import * as Network from 'expo-network'

onlineManager.setEventListener((setOnline) => {
  const eventSubscription = Network.addNetworkStateListener((state) => {
    setOnline(!!state.isConnected)
  })
  return eventSubscription.remove
})

应用聚焦时重新获取

React Native 不使用 window 上的事件侦听器，而是通过 AppState 模块提供焦点信息。您可以使用 AppState 的“change”事件在应用状态更改为“active”时触发更新：

tsx

import { useEffect } from 'react'
import { AppState, Platform } from 'react-native'
import type { AppStateStatus } 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 { useEffect } from 'react'
import { AppState, Platform } from 'react-native'
import type { AppStateStatus } 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()
}, [])

屏幕聚焦时刷新

在某些情况下，您可能希望在 React Native 屏幕再次聚焦时重新获取查询。此自定义钩子将在屏幕再次聚焦时调用提供的 refetch 函数。

tsx

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]),
  )
}

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]),
  )
}

在上面的代码中，第一次会跳过 refetch，因为 useFocusEffect 除了在屏幕聚焦时调用我们的回调之外，还会在挂载时调用它。

在失焦屏幕上禁用查询

如果您不希望某些查询在屏幕失焦时保持“活动”状态，可以使用 useQuery 上的 subscribed 属性。此属性可让您控制查询是否保持订阅更新。结合 React Navigation 的 useIsFocused，它允许您在屏幕未聚焦时无缝取消订阅查询：

示例用法：

tsx

import React from 'react'
import { useIsFocused } from '@react-navigation/native'
import { useQuery } from '@tanstack/react-query'
import { Text } from 'react-native'

function MyComponent() {
  const isFocused = useIsFocused()

  const { dataUpdatedAt } = useQuery({
    queryKey: ['key'],
    queryFn: () => fetch(...),
    subscribed: isFocused,
  })

  return <Text>DataUpdatedAt: {dataUpdatedAt}</Text>
}

import React from 'react'
import { useIsFocused } from '@react-navigation/native'
import { useQuery } from '@tanstack/react-query'
import { Text } from 'react-native'

function MyComponent() {
  const isFocused = useIsFocused()

  const { dataUpdatedAt } = useQuery({
    queryKey: ['key'],
    queryFn: () => fetch(...),
    subscribed: isFocused,
  })

  return <Text>DataUpdatedAt: {dataUpdatedAt}</Text>
}

当 subscribed 为 false 时，查询将取消订阅更新，并且不会为该屏幕触发重新渲染或获取新数据。一旦它再次变为 true（例如，当屏幕重新获得焦点时），查询将重新订阅并保持最新状态。