invalidateQueries 发生得太快了？答案

【问题标题】：invalidateQueries is happening too quickly?invalidateQueries 发生得太快了？
【发布时间】：2022-01-12 02:11:09
【问题描述】：

我正在呈现一个用户可以单击以注销的图标。这个图标是在用户登录的情况下呈现的。我不想在用户未登录时呈现它。我在 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

【问题讨论】：

我应该补充一点，如果我刷新页面，它会重新获取并看到用户已注销并且不再呈现图标。
你不能把history.push("/")移动到失效行之后吗？
@millhouse 不会改变任何东西，用户可以在主页上注销。我把它放在那里以防万一它们在用户专用页面上。

标签： javascript reactjs async-await react-query

【解决方案1】：

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

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

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

这是 stale-while-revalidate 和 stale-if-error 构建库的原则。

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

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

【讨论】：