diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18fddc17..df574c44 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Newsletter opt in update cache by refetching query.
+
 ## [0.31.0] - 2020-02-19
 
 ### Added
diff --git a/node/package.json b/node/package.json
index e67bdd33..920b1119 100644
--- a/node/package.json
+++ b/node/package.json
@@ -7,7 +7,7 @@
     "eslint": "5.x",
     "eslint-config-vtex": "10.x",
     "prettier": "^1.18.2",
-    "typescript": "3.7.3"
+    "typescript": "3.8.3"
   },
   "dependencies": {
     "@vtex/api": "^3.48.2"
diff --git a/node/yarn.lock b/node/yarn.lock
index e7440f23..46ab26fe 100644
--- a/node/yarn.lock
+++ b/node/yarn.lock
@@ -2040,10 +2040,10 @@ type-is@^1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typescript@3.7.3:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
-  integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
+typescript@3.8.3:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
+  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
 universalify@^0.1.0:
   version "0.1.2"
diff --git a/react/components/Profile/NewsletterBox.tsx b/react/components/Profile/NewsletterBox.tsx
index 8b44c913..c6073645 100644
--- a/react/components/Profile/NewsletterBox.tsx
+++ b/react/components/Profile/NewsletterBox.tsx
@@ -5,6 +5,7 @@ import { compose } from 'recompose'
 import { Checkbox } from 'vtex.styleguide'
 
 import ContentBox from '../shared/ContentBox'
+import GET_NEWSLETTER from '../../graphql/getNewsletterOpt.gql'
 import NEWSLETTER_MUTATION from '../../graphql/setOptInNewsletter.gql'
 
 const messages = defineMessages({
@@ -26,7 +27,13 @@ class NewsletterBox extends Component<Props, State> {
   public constructor(props: Props) {
     super(props)
     this.state = {
-      checked: this.props.isNewsletterOptIn,
+      checked: props.isNewsletterOptIn,
+    }
+  }
+
+  public componentDidUpdate(oldProps: Props) {
+    if (oldProps.isNewsletterOptIn !== this.props.isNewsletterOptIn) {
+      this.setState({ checked: this.props.isNewsletterOptIn })
     }
   }
 
@@ -44,7 +51,7 @@ class NewsletterBox extends Component<Props, State> {
             isNewsletterOptIn: !checked,
           },
         }),
-      1000
+      500
     )
     this.setState({ checked: !checked })
   }
@@ -79,14 +86,36 @@ interface State {
   checked: boolean
 }
 
-interface Props extends InjectedIntlProps {
+type Props = ExternalProps & QueryResult & Mutations & InjectedIntlProps
+
+interface ExternalProps {
   userEmail: string
+}
+
+interface QueryData {
+  profile: Pick<Profile, 'customFields'>
+}
+
+interface QueryResult {
   isNewsletterOptIn: boolean
+}
+
+interface Mutations {
   setOptInNewsletter: (args: Variables<SetOptInNewsletterArgs>) => Promise<void>
 }
 
-const enhance = compose<Props, Pick<Props, 'isNewsletterOptIn' | 'userEmail'>>(
-  graphql(NEWSLETTER_MUTATION, { name: 'setOptInNewsletter' }),
+const enhance = compose<Props, ExternalProps>(
+  graphql<Props, QueryData, unknown, QueryResult>(GET_NEWSLETTER, {
+    props: ({ data }) => ({
+      isNewsletterOptIn: data?.profile?.customFields?.[0].value === 'true',
+    }),
+  }),
+  graphql(NEWSLETTER_MUTATION, {
+    name: 'setOptInNewsletter',
+    options: {
+      refetchQueries: ['NewsletterOpt'],
+    },
+  }),
   injectIntl
 )
 
diff --git a/react/components/pages/Profile.tsx b/react/components/pages/Profile.tsx
index 33a16f94..2f0c854f 100644
--- a/react/components/pages/Profile.tsx
+++ b/react/components/pages/Profile.tsx
@@ -47,17 +47,9 @@ class ProfileContainer extends Component<Props> {
     )
   }
 
-  private getIsNewsletterOptIn = (profile: Profile) => {
-    const isNewsletterOptIn = profile.customFields?.find(
-      ({ key }) => key === 'isNewsletterOptIn'
-    )?.value
-    return isNewsletterOptIn?.toLowerCase() === 'true'
-  }
-
   public render() {
     const { profile } = this.props
     const { isEditingPassword, showToast } = this.state
-    const isNewsletterOptIn = this.getIsNewsletterOptIn(profile)
 
     return (
       <main className="flex flex-column-s flex-row-ns">
@@ -85,10 +77,7 @@ class ProfileContainer extends Component<Props> {
               onEditClick={this.handleEditingPassword}
             />
           )}
-          <NewsletterBox
-            isNewsletterOptIn={isNewsletterOptIn}
-            userEmail={profile.email}
-          />
+          <NewsletterBox userEmail={profile.email} />
         </div>
         {showToast && (
           <Toast messageId="alert.success" onClose={this.handleCloseToast} />
@@ -109,9 +98,7 @@ interface Props {
 }
 
 const enhance = compose<Props, void>(
-  graphql(GET_PROFILE, {
-    options: { variables: { customFields: 'isNewsletterOptIn' } },
-  }),
+  graphql(GET_PROFILE),
   branch<Props>(
     ({ data }) => data.profile == null,
     renderComponent(ProfileLoading)
diff --git a/react/graphql/getNewsletterOpt.gql b/react/graphql/getNewsletterOpt.gql
new file mode 100644
index 00000000..10f99a4c
--- /dev/null
+++ b/react/graphql/getNewsletterOpt.gql
@@ -0,0 +1,8 @@
+query NewsletterOpt @context(scope: "private") {
+  profile(customFields: "isNewsletterOptIn") {
+    customFields {
+      key
+      value
+    }
+  }
+}
diff --git a/react/graphql/getProfile.gql b/react/graphql/getProfile.gql
index a978e059..2c28d05e 100644
--- a/react/graphql/getProfile.gql
+++ b/react/graphql/getProfile.gql
@@ -1,5 +1,5 @@
-query Profile($customFields: String) @context(scope: "private") {
-  profile(customFields: $customFields) {
+query Profile @context(scope: "private") {
+  profile {
     cacheId
     firstName
     lastName
@@ -15,9 +15,5 @@ query Profile($customFields: String) @context(scope: "private") {
     stateRegistration
     isCorporate
     passwordLastUpdate
-    customFields {
-      key
-      value
-    }
   }
 }
diff --git a/react/package.json b/react/package.json
index dfef6f3e..2e1b4630 100644
--- a/react/package.json
+++ b/react/package.json
@@ -26,7 +26,7 @@
     "eslint": "5.x",
     "eslint-config-vtex-react": "^5.0.1",
     "prop-types": "^15.7.2",
-    "typescript": "3.7.3"
+    "typescript": "3.8.3"
   },
   "scripts": {
     "lint": "tsc --noEmit && eslint --ext ts,tsx .",
diff --git a/react/yarn.lock b/react/yarn.lock
index c1418999..50767559 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -5203,10 +5203,10 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-typescript@3.7.3:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
-  integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
+typescript@3.8.3:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
+  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
 typescript@^3.3.3333:
   version "3.5.3"