RTK Query useLazyQuery组件间数据不更新，ProtectedRoute无法获取最新认证数据

问题根源 #

你在ProtectedRoute中使用useLazyAuthQuery时，没有调用对应的trigger方法，导致results始终处于初始未触发状态——哪怕登录组件已经触发查询并将认证数据存入RTK Query缓存，ProtectedRoute也不会主动读取缓存数据。

解决方案 #

方案1：改用普通的useAuthQuery（推荐） #

普通的useQuery钩子会在组件挂载时自动执行查询，优先读取缓存数据，无需手动触发。修改ProtectedRoute如下：

import { type FC, type ReactNode } from 'react'
import { Navigate } from 'react-router-dom'
import { useAuthQuery } from 'services/auth' // 替换为非lazy的Query钩子

interface ProtectedRouteProps {
  children: ReactNode
}

const ProtectedRoute: FC<ProtectedRouteProps> = ({ children }) => {
  const { data, isLoading } = useAuthQuery()

  // 处理加载状态，避免页面瞬间跳转
  if (isLoading) {
    return <div>加载中...</div>
  }

  // 未认证或无数据时跳转至登录页
  if (!data || data.message !== 'authenticated') {
    return <Navigate to="/" replace />
  }

  return children
}

export { ProtectedRoute }

方案2：在ProtectedRoute中手动触发useLazyAuthQuery #

如果必须使用lazy版本的钩子，需在组件挂载时调用trigger来读取缓存或发起查询：

import { type FC, type ReactNode, useEffect } from 'react'
import { Navigate } from 'react-router-dom'
import { useLazyAuthQuery } from 'services/auth'

interface ProtectedRouteProps {
  children: ReactNode
}

const ProtectedRoute: FC<ProtectedRouteProps> = ({ children }) => {
  const [trigger, { data, isLoading }] = useLazyAuthQuery()

  // 组件挂载时触发查询，读取缓存数据
  useEffect(() => {
    trigger()
  }, [trigger])

  if (isLoading) {
    return <div>加载中...</div>
  }

  if (!data || data.message !== 'authenticated') {
    return <Navigate to="/" replace />
  }

  return children
}

export { ProtectedRoute }

补充说明 #

登录组件中调用trigger后，RTK Query会将认证结果存入全局缓存。上述两种方案都能让ProtectedRoute读取到缓存中的最新认证状态，解决登录后被强制跳转回首页的问题。

内容的提问来源于stack exchange，提问作者Fabrizio Paolo Petrelli