Updating the cache with data from the fragment

client/coral-embed-stream/src/tabs/profile/containers/Profile.js

@@ -46,7 +46,7 @@ ProfileContainer.propTypes = {
   currentUser: PropTypes.object,
 };
 
-const slots = ['profileSections'];
+const slots = ['profileSections', 'profileSettings', 'profileHeader'];
 
 const withProfileQuery = withQuery(
   gql`

client/coral-framework/graphql/mutations.js

@@ -336,6 +336,29 @@ export const withUpdateEmailAddress = withMutation(
           variables: {
             input,
           },
+          update: proxy => {
+            const UpdateEmailAddressQuery = gql`
+              query Talk_UpdateEmailAddress {
+                me {
+                  id
+                  email
+                }
+              }
+            `;
+
+            const prev = proxy.readQuery({ query: UpdateEmailAddressQuery });
+
+            const data = update(prev, {
+              me: {
+                email: { $set: input.email },
+              },
+            });
+
+            proxy.writeQuery({
+              query: UpdateEmailAddressQuery,
+              data,
+            });
+          },
         });
       },
     }),

plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js

@@ -37,7 +37,7 @@ class ChangeEmailContentDialog extends React.Component {
           <div className={styles.emailChange}>
             <span className={styles.item}>
               {t('talk-plugin-local-auth.change_email.old_email')}:{' '}
-              {this.props.emailAddress}
+              {this.props.email}
             </span>
             <span className={styles.item}>
               {t('talk-plugin-local-auth.change_email.new_email')}:{' '}
@@ -86,7 +86,7 @@ ChangeEmailContentDialog.propTypes = {
   cancel: PropTypes.func,
   onChange: PropTypes.func,
   formData: PropTypes.object,
-  emailAddress: PropTypes.string,
+  email: PropTypes.string,
 };
 
 export default ChangeEmailContentDialog;

plugins/talk-plugin-local-auth/client/components/Profile.js

@@ -158,9 +158,7 @@ class Profile extends React.Component {
 
   render() {
     const {
-      username,
-      emailAddress,
-      root: { me: { state: { status } } },
+      root: { me: { username, email, state: { status } } },
       notify,
     } = this.props;
     const { editing, formData, showDialog } = this.state;
@@ -193,8 +191,8 @@ class Profile extends React.Component {
             save={this.saveEmail}
             onChange={this.onChange}
             formData={this.state.formData}
-            emailAddress={emailAddress}
-            enable={formData.newEmail && emailAddress !== formData.newEmail}
+            email={email}
+            enable={formData.newEmail && email !== formData.newEmail}
           />
         </ConfirmChangesDialog>
 
@@ -221,7 +219,7 @@ class Profile extends React.Component {
                 id="newEmail"
                 name="newEmail"
                 onChange={this.onChange}
-                defaultValue={emailAddress}
+                defaultValue={email}
                 validationType="email"
                 columnDisplay
               />
@@ -230,9 +228,7 @@ class Profile extends React.Component {
         ) : (
           <div className={styles.content}>
             <h2 className={styles.username}>{username}</h2>
-            {emailAddress ? (
-              <p className={styles.email}>{emailAddress}</p>
-            ) : null}
+            {email ? <p className={styles.email}>{email}</p> : null}
           </div>
         )}
         {editing ? (

plugins/talk-plugin-local-auth/client/containers/Profile.js

@@ -15,6 +15,8 @@ const withData = withFragments({
     fragment TalkPluginLocalAuth_Profile_root on RootQuery {
       me {
         id
+        email
+        username
         state {
           status {
             username {