invalidateQueries 发生得太快了吗？

Question

我正在呈现一个用户可以单击以注销的图标。这个图标是在用户登录的情况下呈现的。我不想在用户未登录时呈现它。我在 onClick 事件中有这个功能，只要该功能运行，用户就会在后端，但之后仍会立即获取用户的数据。怎么会这样？我假设我的异步等待函数写错了，或者它使查询失效的速度太快了？我想使用户数据查询无效，以便它重新获取并看到用户未登录，因此不再呈现注销图标。

 const logoutUser = async () => {
    setShowModal(false)
    try{
        await axios.delete('/logout')
        console.log("LoggedOut:")
        history.push("/")
        queryClient.invalidateQueries('userData')
    }catch(error) {
        console.log(error.message)
    }
}

Picture of my backend handling the logout and getting the user data right after

Answer 1

从附图来看，删除请求似乎通过并注销了用户。您正确 await 请求，这很好。 invalidateQueries 也不是“太快”。它只会将查询标记为无效并在它处于活动状态时重新获取它（很可能是）。现在，您再次转到发送 401 的后端。我猜您没有启用重试，否则，您会看到另外 3 个请求。

现在发生的是 react-query 永远不会丢弃缓存数据。即使你有一个 error，如果你之前获取过数据，你的状态将是：

status: 'error',
error: "401 - Unauthorized"
data: staleDataFromTheLastSuccessfulRequest

这是该库所基于的过时重新验证和过时错误原则。

注销后，您可能想要的是：

queryClient.removeQueries('userData') 这将从缓存中删除数据，但不会通知观察者。如果您仍然在屏幕上渲染某些东西，它将一直存在直到下一次重新渲染。当您重定向到注销屏幕时可能不是问题。或者，您可以：
queryClient.resetQueries('userData') 这会将数据重置为初始状态（undefined 除非您将其与 initialData 耦合），并且还会通知活跃的观察者，这可能会导致重新获取。如果您在始终可见的组件（如页眉）中显示该图标，这可能就是您想要的。

invalidateQueries 发生得太快了吗？

invalidateQueries is happening too quickly?

javascript

reactjs

async-await

react-query