Issue #124 Logging in/out should refetch queries

[mike44441]

These changes will refetch the queries when the user signs in or out. The changes will only apply when the user signs out from the dashboard and when the user would sign into the website from either the initial start or while navigating. The site will not refresh when the user cancels from the credentials and only applies when they successfully log in.

[djmitche]

Hi @mike44441 - I'm curious if you're making this contribution as part of an Outreachy application? If so, please remember to include the contribution on your application at outreachy.org!

[mike44441]

Hey @djmitche, I am doing these issues as a part of my coursework and also because I want to participate in open source projects. Also, after spending time on this project, I have developed an interest to contribute more to it if I am able to.

[djmitche]

Got it -- that's great! Let @helfi92 or me know if we can be helpful!

[mike44441]

Awesome! Thanks, hope that this fixes the issue

[helfi92]

Your solution works :) I think we can enhance the user experience by not reloading the page. Apollo provides a nice way of doing it: https://www.apollographql.com/docs/react/recipes/authentication.html#login-logout. We just need to replace window.location.reload by this.props.client.resetStore() and add some comments:

diff --git a/src/components/Dashboard/UserMenu.jsx b/src/components/Dashboard/UserMenu.jsx
index 15ea96a..3ff85f3 100644
--- a/src/components/Dashboard/UserMenu.jsx
+++ b/src/components/Dashboard/UserMenu.jsx
@@ -1,5 +1,6 @@
 import { Component, Fragment } from 'react';
 import { Link } from 'react-router-dom';
+import { withApollo } from 'react-apollo';
 import { withStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
 import Menu from '@material-ui/core/Menu';
@@ -35,6 +36,7 @@ import SignInDialog from '../SignInDialog';
   },
 }))
 @withAuth
+@withApollo
 export default class UserMenu extends Component {
   state = {
     anchorEl: null,
@@ -60,7 +62,9 @@ export default class UserMenu extends Component {
   handleClickSignOut = () => {
     this.handleMenuClose();
     this.props.onUnauthorize();
-    window.location.reload();
+    // Since Apollo caches query results, it’s important to get rid of them
+    // when the login state changes.
+    this.props.client.resetStore();
   };
 
   render() {
diff --git a/src/components/SignInDialog/index.jsx b/src/components/SignInDialog/index.jsx
index b5daade..80983fd 100644
--- a/src/components/SignInDialog/index.jsx
+++ b/src/components/SignInDialog/index.jsx
@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import { withApollo } from 'react-apollo';
 import { bool, func } from 'prop-types';
 import Avatar from '@material-ui/core/Avatar';
 import Dialog from '@material-ui/core/Dialog';
@@ -14,6 +15,7 @@ import { withAuth } from '../../utils/Auth';
 import CredentialsDialog from './CredentialsDialog';
 
 @withAuth
+@withApollo
 export default class SignInDialog extends Component {
   static propTypes = {
     open: bool.isRequired,
@@ -55,7 +57,9 @@ export default class SignInDialog extends Component {
         displayName: credentials.clientId,
       },
     });
-    window.location.reload();
+    // Since Apollo caches query results, it’s important to get rid of them
+    // when the login state changes.
+    this.props.client.resetStore();
     this.props.onClose();
   };

[mike44441]

Alright I'll do that right now, would you want me to leave the comments or remove them?

[helfi92]

You can leave the comments to make it more readable :)

[mike44441]

I just pushed with the changes requested. =)

[helfi92]

🥇

[helfi92]

@mike44441 #158 might be of interest to you. I can provide help as always :) Let me know if you're interested.