React Query 的 useQuery 拿不到最新数据怎么办？

FSD-秀兰提问于 2026-03-22 15:13:21 阅读 4

框架

我在用 React Query 做一个用户信息页面，明明接口返回了新数据，但 useQuery 返回的 data 还是旧的，是不是缓存没刷新？我试过手动 invalidateQueries 也不生效。

奇怪的是，同样的逻辑在 Vue 里用 ref 和 axios 就没问题，比如下面这段：

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const user = ref(null)
axios.get('/api/user').then(res => {
  user.value = res.data // 这里能立刻拿到最新数据
})
</script>

React Query 是不是有什么默认缓存策略我没关掉？

组件设计

我来解答赞 2 收藏

反馈

1 条解答

ლ春芳 Lv1

React Query 默认是有缓存机制的，有时候会导致拿到旧数据。你提到的 invalidateQueries 如果没生效，可能是配置或者使用上有些问题。你可以试试手动设置 staleTime 或者 refetchInterval 来强制刷新。

直接用这个：

import { useQuery } from 'react-query';



const fetchUser = async () => {

  const response = await fetch('/api/user');

  return response.json();

};



const UserComponent = () => {

  const { data, error, isLoading } = useQuery('user', fetchUser, {

    staleTime: 0, // 设置为0表示立即过期，每次都重新获取数据

    // 或者使用 refetchInterval: 5000, // 每5秒自动刷新一次

  });



  if (isLoading) return 'Loading...';

  if (error) return 'An error occurred: ' + error.message;



  return (

    

      User Information


      Name: {data.name}


      Email: {data.email}


    


  );

};

这样应该能解决数据不更新的问题。

2026-03-22 16:00