React TanStack Query即时缓存配置：解决刷新后我的课程不显示问题

你的问题核心是页面刷新后，authState的初始化时机晚于TanStack Query的请求时机，导致第一次请求拿到的是未登录状态下的数据，或者因authState初始为false直接返回空的ownedCourses。以下是针对性的解决办法：

1. 给Query Key添加authState依赖 #

如果接口返回的accessible字段会根据用户登录状态动态变化，将authState（或用户唯一标识，如user.id）加入查询键。这样当authState变化时，TanStack Query会自动识别为新查询并重新请求数据：

const { data, error, isLoading, refetch } = useQuery<CourseDataResponse>({
  queryKey: ['courseData', authState], // 加入authState作为查询键的一部分
  queryFn: async () => {
    const { data } = await AXIOS.get<CourseDataResponse>(
      '/api/courses/courses?page=1&sort[orderId]=asc'
    );
    return data;
  },
  staleTime: 5 * 60 * 1000, // 根据业务需求调整缓存过期时间
  refetchOnWindowFocus: true,
});

2. 延迟查询直到authState就绪 #

通过enabled选项控制查询的发起时机，确保只有当authState存在（用户已登录）时才请求数据，避免拿到未登录状态下的无效数据：

const { data, error, isLoading, refetch } = useQuery<CourseDataResponse>({
  queryKey: ['courseData'],
  queryFn: async () => {
    const { data } = await AXIOS.get<CourseDataResponse>(
      '/api/courses/courses?page=1&sort[orderId]=asc'
    );
    return data;
  },
  enabled: !!authState, // 仅当authState为真时发起请求
  refetchOnWindowFocus: true,
});

3. 监听authState变化手动触发重新请求 #

如果上述两种方式不适用，可以通过useEffect监听authState的变化，当用户登录状态就绪后手动调用refetch更新数据：

const { data, error, isLoading, refetch } = useQuery<CourseDataResponse>({
  queryKey: ['courseData'],
  queryFn: async () => {
    const { data } = await AXIOS.get<CourseDataResponse>(
      '/api/courses/courses?page=1&sort[orderId]=asc'
    );
    return data;
  },
  staleTime: 1000,
  refetchOnWindowFocus: true,
});

useEffect(() => {
  if (authState) {
    refetch();
  }
}, [authState, refetch]);

额外检查点 #

• 验证接口逻辑：确认用户登录时，接口返回的已拥有课程的accessible字段是否正确设置为true。
• 检查authState的初始化：确保authState是从本地存储（如localStorage）同步读取，而非异步延迟加载导致的状态滞后。

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