Fabo/force network loading for refetch queries (#3111)

* some fixes

* fixed fetching and caching issues

* fixed tests

* better failing of e2e tests

* renaming

config.js

@@ -18,5 +18,5 @@ export default {
 
   graphqlHost: graphql,
 
-  e2e: process.env.VUE_APP_E2E
+  e2e: process.env.VUE_APP_E2E || false
 }

src/ActionModal/components/DelegationModal.vue

@@ -10,6 +10,7 @@
     :transaction-data="transactionData"
     :notify-message="notifyMessage"
     @close="clear"
+    @txIncluded="onSuccess"
   >
     <TmFormGroup class="action-modal-form-group">
       <div class="form-message notice">
@@ -143,6 +144,7 @@ import ActionModal from "./ActionModal"
 import transaction from "../utils/transactionTypes"
 import { toMicroDenom } from "src/scripts/common"
 import { formatBech32 } from "src/filters"
+import { UserTransactionAdded } from "src/gql"
 
 export default {
   name: `delegation-modal`,
@@ -253,6 +255,10 @@ export default {
       return this.fromOptions[this.selectedIndex].maximum
     }
   },
+  mounted() {
+    this.$apollo.queries.balance.refetch()
+    this.$apollo.queries.delegations.refetch()
+  },
   methods: {
     open(options) {
       if (options && options.redelegation && this.fromOptions.length > 1) {
@@ -279,6 +285,9 @@ export default {
     },
     enterPressed() {
       this.$refs.actionModal.validateChangeStep()
+    },
+    onSuccess(event) {
+      this.$emit(`success`, event)
     }
   },
   validations() {
@@ -366,6 +375,25 @@ export default {
         return data.network.stakingDenom
       }
     }
+  },
+  $subscribe: {
+    userTransactionAdded: {
+      variables() {
+        return {
+          networkId: this.network,
+          address: this.address
+        }
+      },
+      skip() {
+        return !this.address
+      },
+      query: UserTransactionAdded,
+      result({ data }) {
+        if (data.userTransactionAdded.success) {
+          this.$apollo.queries.delegations.refetch()
+        }
+      }
+    }
   }
 }
 </script>

src/ActionModal/components/SendModal.vue

@@ -9,6 +9,7 @@
     :transaction-data="transactionData"
     :notify-message="notifyMessage"
     @close="clear"
+    @txIncluded="onSuccess"
   >
     <TmFormGroup
       :error="$v.address.$error && $v.address.$invalid"
@@ -194,6 +195,9 @@ export default {
     open() {
       this.$refs.actionModal.open()
     },
+    onSuccess(event) {
+      this.$emit(`success`, event)
+    },
     validateForm() {
       this.$v.$touch()
 

src/ActionModal/components/UndelegationModal.vue

@@ -10,6 +10,7 @@
     :transaction-data="transactionData"
     :notify-message="notifyMessage"
     @close="clear"
+    @txIncluded="onSuccess"
   >
     <TmFormGroup class="action-modal-form-group">
       <div class="form-message notice">
@@ -174,6 +175,9 @@ export default {
     switchToRedelegation() {
       this.$refs.actionModal.close()
       this.$emit("switchToRedelegation")
+    },
+    onSuccess(event) {
+      this.$emit(`success`, event)
     }
   },
   apollo: {

src/components/common/TmBalance.vue

@@ -42,6 +42,7 @@
 </template>
 <script>
 import { shortDecimals } from "scripts/num"
+import refetchNetworkOnly from "scripts/refetch-network-only"
 import { noBlanks } from "src/filters"
 import TmBtn from "common/TmBtn"
 import SendModal from "src/ActionModal/components/SendModal"
@@ -74,12 +75,6 @@ export default {
       return this.overview.totalRewards > 0
     }
   },
-  mounted() {
-    // We need to account or a small delay in the node processing of balances.
-    // TODO: Find a cleaner solution.
-    const refetch = () => this.$apollo.queries.overview.refetch()
-    setTimeout(refetch, 2000)
-  },
   methods: {
     onWithdrawal() {
       this.$refs.ModalWithdrawRewards.open()
@@ -150,7 +145,7 @@ export default {
         query: UserTransactionAdded,
         result() {
           // query if successful or not as even an unsuccessful tx costs fees
-          this.$apollo.queries.overview.refetch()
+          refetchNetworkOnly(this.$apollo.query.overview)
         }
       }
     }

src/components/governance/PageProposal.vue

@@ -240,6 +240,7 @@ export default {
         proposalId: this.proposal.id,
         address: this.address
       })
+      this.$store.commit("invalidateCache", [`overview`])
     },
     onDeposit() {
       this.$refs.modalDeposit.open()
@@ -248,6 +249,7 @@ export default {
       this.$apollo.queries.proposal.refetch({
         id: this.proposal.id
       })
+      this.$store.commit("invalidateCache", [`overview`])
     }
   },
   apollo: {

src/components/governance/PageProposals.vue

@@ -81,6 +81,7 @@ export default {
     },
     afterPropose() {
       this.$apollo.queries.proposals.refetch()
+      this.$store.commit("invalidateCache", [`overview`])
     }
   },
   apollo: {

src/components/staking/DelegationsOverview.vue

@@ -28,6 +28,7 @@ import { mapGetters } from "vuex"
 import TmDataMsg from "common/TmDataMsg"
 import TableValidators from "staking/TableValidators"
 import { DelegationsForDelegator, UserTransactionAdded } from "src/gql"
+import refetchNetworkOnly from "scripts/refetch-network-only"
 
 export default {
   name: `delegations-overview`,
@@ -72,7 +73,7 @@ export default {
         query: UserTransactionAdded,
         result({ data }) {
           if (data.userTransactionAdded.success) {
-            this.$apollo.queries.delegations.refetch()
+            refetchNetworkOnly(this.$apollo.query.delegations)
           }
         }
       }

src/components/staking/PageValidator.vue

@@ -133,11 +133,16 @@
         </li>
       </ul>
 
-      <DelegationModal ref="delegationModal" :target-validator="validator" />
+      <DelegationModal
+        ref="delegationModal"
+        :target-validator="validator"
+        @success="clearDelegationCache"
+      />
       <UndelegationModal
         ref="undelegationModal"
         :source-validator="validator"
         @switchToRedelegation="onDelegation({ redelegation: true })"
+        @success="clearUnelegationCache"
       />
     </template>
     <template v-else>
@@ -212,6 +217,10 @@ export default {
     ...mapGetters([`network`]),
     ...mapGetters({ userAddress: `address` })
   },
+  mounted() {
+    this.$apollo.queries.rewards.refetch()
+    this.$apollo.queries.delegation.refetch()
+  },
   methods: {
     shortDecimals,
     atoms,
@@ -222,6 +231,12 @@ export default {
     },
     onUndelegation() {
       this.$refs.undelegationModal.open()
+    },
+    clearDelegationCache() {
+      this.$store.commit("invalidateCache", [`overview`, `delegations`]) // TODO use more finegrained query string (network and address)
+    },
+    clearUndelegationCache() {
+      this.$store.commit("invalidateCache", [`overview`, `delegations`]) // TODO use more finegrained query string (network and address)
     }
   },
   apollo: {
@@ -285,9 +300,7 @@ export default {
         }
       },
       update: result => {
-        const r = result.rewards.length > 0 ? result.rewards[0] : { amount: 0 }
-        console.log(r)
-        return r
+        return result.rewards.length > 0 ? result.rewards[0] : { amount: 0 }
       }
     },
     validator: {

src/components/staking/Undelegations.vue

@@ -10,6 +10,7 @@
 <script>
 import { mapGetters } from "vuex"
 import TableUndelegations from "staking/TableUndelegations"
+import refetchNetworkOnly from "scripts/refetch-network-only"
 import { UndelegationsForDelegator, UserTransactionAdded } from "src/gql"
 
 export default {
@@ -51,7 +52,7 @@ export default {
         query: UserTransactionAdded,
         result({ data }) {
           if (data.userTransactionAdded.success) {
-            this.$apollo.queries.undelegations.refetch()
+            refetchNetworkOnly(this.$apollo.query.undelegations)
           }
         }
       }

src/scripts/refetch-network-only.js

@@ -0,0 +1,10 @@
+// when refetching always force to load from the network
+export default apolloQuery => {
+  apolloQuery.setOptions({
+    fetchPolicy: "network-only"
+  })
+  apolloQuery.refetch()
+  apolloQuery.setOptions({
+    fetchPolicy: "cache-and-network"
+  })
+}

src/vuex/modules/session.js

@@ -9,7 +9,7 @@ const windowsWarning = `If you’re using Windows 10 (May 2019 update), signing
 transactions with your Ledger Nano S will not work. Please use another
 operating system, or version of Windows.`
 
-export default () => {
+export default ({ apollo }) => {
   const USER_PREFERENCES_KEY = `lunie_user_preferences`
 
   const state = {
@@ -63,8 +63,8 @@ export default () => {
     setExperimentalMode(state) {
       state.experimentalMode = true
     },
-    setInsecureMode(state, insecureMode) {
-      state.insecureMode = insecureMode
+    setInsecureMode(state) {
+      state.insecureMode = true
     },
     addHistory(state, path) {
       state.history.push(path)
@@ -80,6 +80,19 @@ export default () => {
     },
     setCurrrentModalOpen(state, modal) {
       state.currrentModalOpen = modal
+    },
+
+    // TODO to own store module?
+    // clear the cache manually so we can force reloading of stale data in not mounted components
+    invalidateCache(state, queries) {
+      let rootQuery = apollo.cache.data.data.ROOT_QUERY
+      Object.keys(rootQuery)
+        .filter(query =>
+          queries.find(queryToClear => query.startsWith(queryToClear))
+        )
+        .forEach(query => {
+          delete rootQuery[query]
+        })
     }
   }
 

tests/e2e/helpers.js

@@ -34,7 +34,8 @@ async function waitFor(check, iterations = 10, timeout = 1000) {
     }
   }
 
-  throw new Error("Condition was not meet in time")
+  console.error("Condition was not meet in time")
+  process.exit(2) // exiting here so the e2e tests actually fail. if not they pass
 }
 async function waitForText(
   browser,
@@ -50,10 +51,7 @@ async function waitForText(
     },
     iterations,
     timeout
-  ).catch(err => {
-    console.log(err.message)
-    process.exit(2)
-  })
+  )
 }
 
 // performs some details actions and handles checking of the invoice step + signing
@@ -67,7 +65,7 @@ async function actionModalCheckout(
 ) {
   // grab page we came from as we want to go to another page and come back
   let sourcePage
-  browser.url(function(result) {
+  browser.url(function (result) {
     sourcePage = result.value
   })
 
@@ -140,12 +138,14 @@ async function actionModalCheckout(
 
   // check if balance header updates as expected
   // TODO find a way to know the rewards on an undelegation to know the final balance 100%
+  console.log("Wait for total balance to update")
   await waitFor(async () => {
     const approximatedBalanceAfter = balanceBefore - expectedTotalChange - fees
     expect(
       Math.abs(approximatedBalanceAfter - (await getBalance(browser)))
     ).to.be.lessThan(2) // acounting for rewards being withdrawn on an undelegation
   })
+  console.log("Wait for liquid balance to update")
   await waitFor(async () => {
     const approximatedAvailableBalanceAfter =
       availableTokensBefore - expectedAvailableTokensChange - fees

tests/unit/specs/components/ActionModal/components/DelegationModal.spec.js

@@ -29,7 +29,7 @@ describe(`DelegationModal`, () => {
   let wrapper
   const localVue = createLocalVue()
   localVue.use(Vuelidate)
-  localVue.directive("focus", () => {})
+  localVue.directive("focus", () => { })
 
   const state = {
     session: {
@@ -46,7 +46,13 @@ describe(`DelegationModal`, () => {
     wrapper = shallowMount(DelegationModal, {
       localVue,
       mocks: {
-        $store: { getters, state }
+        $store: { getters, state },
+        $apollo: {
+          queries: {
+            balance: { refetch: () => { } },
+            delegations: { refetch: () => { } }
+          }
+        }
       },
       propsData: {
         targetValidator: validators[0]

tests/unit/specs/components/staking/PageValidator.spec.js

@@ -54,7 +54,16 @@ describe(`PageValidator`, () => {
       queries: {
         validator: {
           loading: false,
-          error: false
+          error: false,
+          refetch: () => {}
+        },
+        rewards: {
+          loading: false,
+          error: false,
+          refetch: () => {}
+        },
+        delegation: {
+          refetch: () => {}
         }
       }
     }