Tuesday 3 November 2020

apollo's useQuery data does not update after client.resetStore()

I am having an issue with useQuery from @apollo/client

I have a Navbar component

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

  console.log('navbar', data)

  return <ReactStuff />
}

And I also have a UserProfile component which allows the user to logout via a button. When the user presses the button, this code is ran:

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

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

useUsers is a custom hook which houses the resetStore function:

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
  }
}

Now I can't for the life of me figure out why the Navbar component, does not get updated when logout is pressed.

I have a withAuth higher-order component which does the exact same query, and this works absolutely fine. The user is sent to the /login page, and If I was to console.log(data) it is updated as undefined - as expected.


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;
};

For some reason, this useQuery inside Navbar is holding onto this stale data for some reason and I can't figure out how to make it work correctly.

Update 1:

I've changed the logoutUser function to use clearStore() and the same thing happens, the Navbar is not updated, but I am redirected to /login and withAuth is working as intended.

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


from apollo's useQuery data does not update after client.resetStore()

No comments:

Post a Comment