Fabo/fetch policy (#3390)

* set fetch policies correctly

* fixed tests

* changelog

* coverage

* remove cache invalidation handlers from delegation modals

* switch to default fetch-policy to cache-and-network

* linted

* always requery data on incomming tx on delegation modal

* reload balance on open in delegation modal

* fix data undefined

* fix delegation modal test

* refetch delegations in undelegation modal

* coverage

* fix test

Co-authored-by: Ana G. <40721795+Bitcoinera@users.noreply.github.com>

changes/fabo_fetch-policy

@@ -0,0 +1 @@
+[Fixed] [#3390](https://github.com/cosmos/lunie/pull/3390) Fix ActionModal data being out of date if a live update of data happened @faboweb

src/ActionModal/components/ActionModal.vue

@@ -481,7 +481,6 @@ export default {
         userAddress: this.session.address,
         rewards: this.rewards,
         totalRewards: this.overview.totalRewards,
-        delegations: this.delegations,
         bondDenom: this.network.stakingDenom,
         isExtensionAccount: this.isExtensionAccount,
         account: this.overview.accountInformation
@@ -735,7 +734,6 @@ export default {
           overview(networkId: $networkId, address: $address) {
             totalRewards
             liquidStake
-            totalStake
             accountInformation {
               accountNumber
               sequence
@@ -767,11 +765,8 @@ export default {
         query NetworkActionModal($networkId: String!) {
           network(id: $networkId) {
             id
-            testnet
             stakingDenom
             chain_id
-            rpc_url
-            api_url
             action_send
             action_claim_rewards
             action_delegate
@@ -795,39 +790,6 @@ export default {
         return data.network
       }
     },
-    delegations: {
-      query: gql`
-        query DelegationsActionModal(
-          $networkId: String!
-          $delegatorAddress: String!
-        ) {
-          delegations(
-            networkId: $networkId
-            delegatorAddress: $delegatorAddress
-          ) {
-            amount
-            validator {
-              operatorAddress
-            }
-          }
-        }
-      `,
-      skip() {
-        /* istanbul ignore next */
-        return !this.session.address
-      },
-      variables() {
-        /* istanbul ignore next */
-        return {
-          networkId: this.networkId,
-          delegatorAddress: this.session.address
-        }
-      },
-      update(data) {
-        /* istanbul ignore next */
-        return data.delegations
-      }
-    },
     $subscribe: {
       userTransactionAdded: {
         variables() {

src/ActionModal/components/DelegationModal.vue

@@ -269,13 +269,11 @@ export default {
       return this.fromSelectedIndex !== `0`
     }
   },
-  mounted() {
-    this.$apollo.queries.balance.refetch()
-    this.$apollo.queries.delegations.refetch()
-  },
   methods: {
     open() {
       this.$refs.actionModal.open()
+      this.$apollo.queries.balance.refetch()
+      this.$apollo.queries.delegations.refetch()
     },
     validateForm() {
       this.$v.$touch()
@@ -398,6 +396,7 @@ export default {
           }
         }
       `,
+      fetchPolicy: "cache-first",
       variables() {
         /* istanbul ignore next */
         return {
@@ -424,11 +423,11 @@ export default {
         return !this.address
       },
       query: UserTransactionAdded,
-      result({ data }) {
+      result() {
         /* istanbul ignore next */
-        if (data.userTransactionAdded.success) {
-          this.$apollo.queries.delegations.refetch()
-        }
+        this.$apollo.queries.balance.refetch()
+        /* istanbul ignore next */
+        this.$apollo.queries.delegations.refetch()
       }
     }
   }

src/ActionModal/components/ModalWithdrawRewards.vue

@@ -118,6 +118,7 @@ export default {
           }
         }
       `,
+      fetchPolicy: "cache-first",
       variables() {
         return {
           networkId: this.network

src/ActionModal/components/SendModal.vue

@@ -134,6 +134,7 @@ import ActionModal from "./ActionModal"
 import transaction from "../utils/transactionTypes"
 import { toMicroDenom } from "src/scripts/common"
 import config from "src/../config"
+import { UserTransactionAdded } from "src/gql"
 
 const defaultMemo = "(Sent via Lunie)"
 
@@ -189,6 +190,9 @@ export default {
       }
     }
   },
+  mounted() {
+    this.$apollo.queries.balance.refetch()
+  },
   methods: {
     open() {
       this.$refs.actionModal.open()
@@ -280,6 +284,26 @@ export default {
           denom: this.denom
         }
       }
+    },
+    $subscribe: {
+      userTransactionAdded: {
+        variables() {
+          /* istanbul ignore next */
+          return {
+            networkId: this.network,
+            address: this.userAddress
+          }
+        },
+        skip() {
+          /* istanbul ignore next */
+          return !this.userAddress
+        },
+        query: UserTransactionAdded,
+        result() {
+          /* istanbul ignore next */
+          this.$apollo.queries.balance.refetch()
+        }
+      }
     }
   }
 }

src/ActionModal/components/UndelegationModal.vue

@@ -124,6 +124,7 @@ import TmFormMsg from "src/components/common/TmFormMsg"
 import transaction from "../utils/transactionTypes"
 import { toMicroDenom } from "src/scripts/common"
 import { formatBech32, validatorEntry } from "src/filters"
+import { UserTransactionAdded } from "src/gql"
 
 export default {
   name: `undelegation-modal`,
@@ -266,6 +267,7 @@ export default {
   methods: {
     open() {
       this.$refs.actionModal.open()
+      this.$apollo.queries.delegations.refetch()
     },
     validateForm() {
       this.$v.$touch()
@@ -331,6 +333,7 @@ export default {
           }
         }
       `,
+      fetchPolicy: "cache-first",
       variables() {
         /* istanbul ignore next */
         return {
@@ -363,6 +366,27 @@ export default {
         /* istanbul ignore next */
         return data.validators
       }
+    },
+
+    $subscribe: {
+      userTransactionAdded: {
+        variables() {
+          /* istanbul ignore next */
+          return {
+            networkId: this.network,
+            address: this.userAddress
+          }
+        },
+        skip() {
+          /* istanbul ignore next */
+          return !this.userAddress
+        },
+        query: UserTransactionAdded,
+        result() {
+          /* istanbul ignore next */
+          this.$apollo.queries.delegations.refetch()
+        }
+      }
     }
   }
 }

src/components/common/TmBalance.vue

@@ -53,12 +53,10 @@
 </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"
 import ModalWithdrawRewards from "src/ActionModal/components/ModalWithdrawRewards"
-import { UserTransactionAdded } from "src/gql"
 import { mapGetters } from "vuex"
 import gql from "graphql-tag"
 export default {
@@ -143,22 +141,6 @@ export default {
       }
     },
     $subscribe: {
-      userTransactionAdded: {
-        variables() {
-          return {
-            networkId: this.network,
-            address: this.address
-          }
-        },
-        skip() {
-          return !this.address
-        },
-        query: UserTransactionAdded,
-        result() {
-          // query if successful or not as even an unsuccessful tx costs fees
-          refetchNetworkOnly(this.$apollo.queries.overview)
-        }
-      },
       blockAdded: {
         variables() {
           return {
@@ -176,7 +158,8 @@ export default {
           `
         },
         result() {
-          refetchNetworkOnly(this.$apollo.queries.overview)
+          /* istanbul ignore next */
+          this.$apollo.queries.overview.refetch()
         }
       }
     }

src/components/governance/PageProposal.vue

@@ -196,7 +196,6 @@ import { ProposalItem, GovernanceParameters, Vote } from "src/gql"
 import BigNumber from "bignumber.js"
 import Bech32 from "common/Bech32"
 import gql from "graphql-tag"
-import refetchNetworkOnly from "scripts/refetch-network-only"
 
 export default {
   name: `page-proposal`,
@@ -270,20 +269,13 @@ export default {
       this.$refs.modalVote.open()
     },
     afterVote() {
-      this.$apollo.queries.vote.refetch({
-        proposalId: this.proposal.id,
-        address: this.address
-      })
-      this.$store.commit("invalidateCache", [`overview`, `transactions`])
+      this.$apollo.queries.vote.refetch()
     },
     onDeposit() {
       this.$refs.modalDeposit.open()
     },
     afterDeposit() {
-      this.$apollo.queries.proposal.refetch({
-        id: this.proposal.id
-      })
-      this.$store.commit("invalidateCache", [`overview`, `transactions`])
+      this.$apollo.queries.proposal.refetch()
     },
     getProposalIndex(num) {
       let proposalsObj = this.proposals
@@ -424,9 +416,9 @@ export default {
             this.proposal.status !== "Rejected" &&
             this.loaded
           ) {
-            refetchNetworkOnly(this.$apollo.queries.proposal)
-            refetchNetworkOnly(this.$apollo.queries.parameters)
-            refetchNetworkOnly(this.$apollo.queries.vote)
+            this.$apollo.queries.proposal.refetch()
+            this.$apollo.queries.parameters.refetch()
+            this.$apollo.queries.vote.refetch()
           }
         }
       }

src/components/governance/PageProposals.vue

@@ -44,7 +44,6 @@ import TmDataMsg from "common/TmDataMsg"
 import { mapGetters } from "vuex"
 import { GovernanceParameters } from "src/gql"
 import gql from "graphql-tag"
-import refetchNetworkOnly from "scripts/refetch-network-only"
 
 export default {
   name: `page-proposals`,
@@ -71,7 +70,6 @@ export default {
     },
     afterPropose() {
       this.$apollo.queries.proposals.refetch()
-      this.$store.commit("invalidateCache", [`overview`, `transactions`])
     }
   },
   apollo: {
@@ -133,7 +131,7 @@ export default {
         },
         result() {
           /* istanbul ignore next */
-          refetchNetworkOnly(this.$apollo.queries.proposals)
+          this.$apollo.queries.proposals.refetch()
         }
       }
     }

src/components/network/PageNetworks.vue

@@ -37,6 +37,7 @@ export default {
   apollo: {
     networks: {
       query: Networks,
+      fetchPolicy: "cache-first",
       update: NetworksResult
     }
   }

src/components/staking/DelegationsOverview.vue

@@ -38,7 +38,6 @@ 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`,
@@ -82,8 +81,9 @@ export default {
         },
         query: UserTransactionAdded,
         result({ data }) {
+          /* istanbul ignore next */
           if (data.userTransactionAdded.success) {
-            refetchNetworkOnly(this.$apollo.queries.delegations)
+            this.$apollo.queries.delegations.refetch()
           }
         }
       }