Question

我遇到useQuery中的@apollo/client的问题

我有一个Navbar组件

const Navbar = () => {
  const { loading, data, error } = useQuery(GET_CURRENT_USER);

  console.log('navbar', data)

  return <ReactStuff />
}

我还有一个UserProfile组件，它允许用户通过按钮注销。当用户按下按钮时，将运行以下代码：

const {
  getCurrentUser,
  changePassword,
  changePasswordData,
  logoutUser,
} = useUsers();

const logout = () => {
  logoutUser();
  localStorage.removeItem("authToken");
  props.history.push("/");
};

useUsers是一个自定义钩子，其中包含resetStore函数：

const useUser = () => {
  const { client, loading, error, data, refetch } = useQuery(GET_CURRENT_USER);
    
  const logoutUser = () => {
    console.log("firing logout user");
    client
      .resetStore()
      .then((data) => {
        console.log("here in reset store success");
      })
      .catch((err) => {
        console.log("here in error");
      }); // causes uncaught error when logging out.
    };
    
  return {
    // other useUser functions
    logoutUser
  }
}

现在，我无法确定为什么按下Navbar时logout组件不会得到更新。

我有一个withAuth高阶组件，它执行完全相同的查询，因此绝对可以正常工作。用户被发送到/ login页面，并且如果我去过console.log(data)，它会被更新为undefined-符合预期。


import { GET_CURRENT_USER } from "../graphql/queries/user";

/**
 * Using this HOC
 * we can check to see if the user is authed
 */
const withAuth = (Component) => (props) => {
  const history = useHistory();
  const { loading, data, error } = useQuery(GET_CURRENT_USER);

  if (error) console.warn(error);
  if (loading) return null;

  if (data && data.user) {
    return <Component {...props} />;
  }

  if (!data) {
    history.push("/login");
    return "null";
  }

  return null;
};

出于某种原因，useQuery中的Navbar出于某种原因保留了该过时的数据，我不知道如何使它正确运行。

更新1：

我已将logoutUser函数更改为使用clearStore()，并且发生了同样的事情，导航栏未更新，但是我重定向到了/login并且withAuth可以正常工作。

const logoutUser = () => {
  client
    .clearStore()
    .then((data) => console.log(data)) // logs []
    .catch((err) => console.log(err)); // no error because no refetch
  };

Answer 1

您不是在等待存储重置，可能是在重置完成之前发生了重定向和存储清理，请尝试在重置完成后执行

COPY

在client.resetStore（）之后，阿波罗的useQuery数据不会更新

1 个答案: