时间戳

首页 > 解决方案 > 如何告诉 ApolloClient 重新获取特定查询并重新呈现组件？

reactjs - 如何告诉 ApolloClient 重新获取特定查询并重新呈现组件？

问题描述

我是使用 ApolloClient 的新手，所以如果这是一个不好的问题，我很抱歉，但我真的可以使用一些帮助。我习惯使用 Redux 和基于类的组件，使用 Apollo 和功能组件和钩子对我来说是非常新的，我什至不知道如何做最简单的事情。

现在我正在尝试实现一个身份验证系统。我有发送用户凭据并接收身份验证令牌的查询。我有一个标题，它是与注册/登录表单分开的组件，它显示登录或注销按钮。它使用一个查询将身份验证令牌发送到受保护的路由，并接收回用户信息（如用户名）。

我的任务非常简单——一旦单击“注销”按钮，我希望重新获取获取用户信息的查询，并重新呈现标题组件，以便显示“登录”而不是“注销”按钮" 按钮。

我这样做是这样的：

export default function Header() {
  const { data, refetch } = useQuery(USER_INFO)
  function logout() {
    cookieCutter.set("Authorization", "", { expires: new Date(0) })
    refetch()
  }
  return (
    <header>
      [...]
      // If there's user info inside of data, render logout button, otherwise render login button.
      <a onClick={logout}>
        Logout
      </a>
      [...]
    </header>
  )
}

所以我试图删除 auth cookie，然后重新获取查询。我希望运行该refetch()函数将重新获取查询，该查询将返回空data对象（因为不再有任何身份验证令牌），并重新渲染组件以现在显示“登录”按钮。

但是当我单击“注销”按钮时，组件不会重新呈现。如果我手动刷新页面，它会看到没有令牌，并按预期呈现“注销”按钮。

我觉得必须有一个简单而标准的方法来做这样的事情，但我不知道那是什么。你能帮我吗？

（我知道refetchQueries你可以传递给突变的参数，但它不适用于这里）。

标签： reactjsgraphqlapolloapollo-client

解决方案

如果您使用 Apollo，则不需要 Redux。

对于 auth 看看这个

推荐阅读