React Query的useQuery数据更新后页面为什么没反应？

公孙静薇提问于 2026-01-30 12:35:41 阅读 53

优化

我在Vue项目里用React Query的useQuery请求数据，初始加载没问题，但后端数据更新后页面没变化，手动刷新才显示最新数据。尝试过加staleTime:0和refetchQueries但都没用。

代码大概是这样写的：



  {{ items }}



import { useQuery } from 'vue-react-query'
import { ref } from 'vue'

const { data } = useQuery(['items'], () => fetch('/api/items').then(res => res.json()))
const items = data.value // 这里是不是哪里错了？

数据确实在控制台返回了新值，但页面显示一直是旧数据。是不是响应式变量绑定有问题？或者React Query在Vue里需要特殊处理？

我来解答赞 11 收藏

反馈

2 条解答

IT人玉硕 Lv1

vue的响应式系统和react query的data更新不同步了，用watchEffect包裹赋值就行了

const items = ref([])



watchEffect(() => {

  items.value = data.value

})

2026-02-07 11:09

开发者博硕 Lv1

问题出在 Vue 的响应式系统和 React Query 的数据绑定上。你这里直接用 data.value 赋值给 items，会导致失去响应式特性，所以页面不会自动更新。

正确做法是把查询结果绑定到一个 Vue 的响应式变量上，比如用 ref 或 reactive 包装一下。修改后的代码如下：

import { useQuery } from 'vue-react-query'

import { ref } from 'vue'



const items = ref([]) // 创建一个响应式变量



useQuery(['items'], () => fetch('/api/items').then(res => res.json()), {

  onSuccess: (data) => {

    items.value = data // 把查询结果赋值给响应式变量

  }

})

这样就确保了 items 是响应式的，当后端数据更新时，页面会自动重新渲染。

另外提醒一下，staleTime: 0 和 refetchQueries 只是控制数据刷新策略的，跟 Vue 的响应式绑定没关系。如果服务端数据变了但查询没触发，可以检查下是不是缓存策略导致的。

2026-01-30 18:07