React Native调用React Query removeQueries报this.queryCache错误

该错误由方法解构丢失this上下文导致：

• 你从useQueryClient()返回的QueryClient实例上直接解构removeQueries方法后，方法执行时内部的this不再指向原QueryClient实例，访问this.queryCache时得到undefined，因此抛出错误。
• 根组件中QueryClientProvider的包裹逻辑完全正确，不需要调整这部分配置。

不要直接解构QueryClient实例上的方法，先持有完整的queryClient实例，再通过实例调用方法即可。
修正后的业务组件代码：

export default () => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>()
  const { setCurrentPortfolioId } = useCurrentPortfolio()
  // 持有完整queryClient实例，不单独解构方法
  const queryClient = useQueryClient()

  const clearMemory = async () => {
    setCurrentPortfolioId(null)
    try {
      // 通过实例调用，保证this指向正确
      queryClient.removeQueries()
    } catch (error) {
      console.log(error)
    }
    // 修正原代码无效的await setTimeout写法：setTimeout本身不返回Promise，直接await不会达到等待效果
    await new Promise(resolve => setTimeout(resolve, 1000))

    await SecureStore.deleteItemAsync('EMAIL')
    await SecureStore.deleteItemAsync('PASSWORD')

    navigation.replace('SignIn')
  }
  return (
    <SafeAreaView style={styles.container}>
      <Button onPress={clearMemory} label="LOG OUT" />
    </SafeAreaView>
  )
}

如果一定要使用解构写法，需要手动为方法绑定上下文，该写法冗余度更高，不推荐：

const queryClient = useQueryClient()
const removeQueries = queryClient.removeQueries.bind(queryClient)
// 后续直接调用removeQueries()即可正常执行

内容的提问来源于stack exchange，提问作者Norfeldt