Add query retries

Author: JaniAnttonen

components/AvailableStakes/index.tsx

@@ -2,6 +2,7 @@ import { ethers } from "ethers";
 import Image from "next/image";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Column, Row } from "react-table";
+import { retry } from "ts-retry";
 import { useSnapshot } from "valtio";
 import { CaretDown } from "phosphor-react";
 import { useGetAssetPairsQuery } from "../../generated/graphql";
@@ -37,10 +38,17 @@ export const AvailableStakes = () => {
   useEffect(() => {
     const id = setTimeout(() => {
       if (!fetching) {
-        executeQuery({ requestPolicy: "network-only" });
+        retry(() => {
+          console.log(_data)
+          return executeQuery(
+            { requestPolicy: "network-only" }
+          )
+        },
+        { until: () => _data !== undefined })
       }
     }, 3000);
     return () => clearTimeout(id);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetching, executeQuery]);
 
   const columns: Column<ColumnType>[] = useMemo(

package.json

@@ -35,6 +35,7 @@
     "react-toastify": "^8.2.0",
     "sharp": "^0.29.3",
     "subscriptions-transport-ws": "^0.11.0",
+    "ts-retry": "^2.3.9",
     "urql": "^2.0.5",
     "valtio": "^1.2.6",
     "web3modal": "^1.9.4"

pages/stake.tsx

@@ -14,11 +14,10 @@ import { MyStakes } from "../components/MyStakes";
 import Stack from "../components/Stack";
 import Text from "../components/Text";
 import { GetAssetPairsDocument } from "../generated/graphql";
-import { state, VanillaEvents } from "../state";
+import { state } from "../state";
 import { fetchStakes } from "../state/actions/stakes";
 import { connectWallet } from "../state/actions/wallet";
 import client, { ssrCache } from "../urql";
-import { emitEvent } from "../utils/helpers";
 
 
 const StakingIntro = () => (
@@ -111,7 +110,7 @@ const Stake = () => {
       const { walletAddress } = snapshot(state);
       // Check that the event was created by the logged in user
       if (user.toLowerCase() === walletAddress?.toLowerCase()) {
-        emitEvent(VanillaEvents.stakesChanged);
+        fetchStakes();
       }
     };
 
@@ -124,16 +123,6 @@ const Stake = () => {
     };
   }, [polygonProvider, signer, walletAddress]);
 
-  useEffect(() => {
-    const onStakesChange = () => {
-      fetchStakes();
-    };
-    window.addEventListener(VanillaEvents.stakesChanged, onStakesChange);
-    return () => {
-      window.removeEventListener(VanillaEvents.stakesChanged, onStakesChange);
-    };
-  }, []);
-
   return (
     <>
       <Flex

state/actions/stakes.tsx

@@ -1,5 +1,6 @@
 import { isAddress, Token } from "@vanilladefi/core-sdk";
 import { getAllStakes } from "@vanilladefi/stake-sdk";
+import { retryAsync } from 'ts-retry';
 import { snapshot } from "valtio";
 import { Sentiment, Stake, state } from "..";
 import tokens from "../../tokens";
@@ -29,10 +30,15 @@ export const fetchStakes = async () => {
     process.env.NEXT_PUBLIC_VANILLA_ROUTER_ADDRESS || ""
   );
 
-  const res = await getAllStakes(walletAddress, _tokens, {
-    signerOrProvider: signer || (polygonProvider as any),
-    optionalAddress: contractAddress || "",
-  });
+  const res = await retryAsync(
+    async () => {
+      console.log(_tokens)
+      return await getAllStakes(walletAddress, _tokens, {
+        signerOrProvider: signer || (polygonProvider as any),
+        optionalAddress: contractAddress || "",
+      })
+    }
+  );
 
   let _stakes: Stake[] = [];
 

state/actions/wallet.tsx

@@ -1,16 +1,20 @@
 import { isAddress, vnlDecimals } from "@vanilladefi/core-sdk";
 import {
   getBasicWalletDetails,
-  getJuiceStakingContract,
+  getJuiceStakingContract
 } from "@vanilladefi/stake-sdk";
 import { BigNumber, providers } from "ethers";
-import { snapshot } from "valtio";
+import { parseUnits } from "ethers/lib/utils";
 import { toast } from "react-toastify";
+import { retryAsync } from 'ts-retry';
+import { snapshot } from "valtio";
 import { ref, state, subscribeKey, VanillaEvents } from "..";
-import { correctNetwork, getHexaDecimalChainId } from "../../lib/config";
+import {
+  correctNetwork,
+  getHexaDecimalChainId
+} from "../../lib/config";
 import { emitEvent, formatJuice, parseJuice } from "../../utils/helpers";
 import { showDialog } from "./dialog";
-import { parseUnits } from "ethers/lib/utils";
 
 let lockedWalletToast: any;
 
@@ -220,12 +224,13 @@ export const updateBalances = async () => {
     const contractAddress = isAddress(
       process.env.NEXT_PUBLIC_VANILLA_ROUTER_ADDRESS || ""
     );
-    let { vnlBalance, ethBalance, maticBalance, juiceBalance } =
-      await getBasicWalletDetails(walletAddress, {
+    let { vnlBalance, ethBalance, maticBalance, juiceBalance } = await retryAsync(
+      async () => await getBasicWalletDetails(walletAddress, {
         polygonProvider: polygonProvider || undefined,
         ethereumProvider: ethereumProvider || undefined,
         optionalAddress: contractAddress || undefined,
-      });
+      })
+    );
 
     state.balances.vnl = Number(vnlBalance).toLocaleString();
     state.balances.eth = Number(ethBalance).toLocaleString();

yarn.lock

@@ -8208,6 +8208,11 @@ ts-node@^9:
     source-map-support "^0.5.17"
     yn "3.1.1"
 
+ts-retry@^2.3.9:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/ts-retry/-/ts-retry-2.3.9.tgz#ee7e976c8beb93fb069ef7366c5afabc8f3083e9"
+  integrity sha512-/O/iMy5a56uQID22RU/9OyMLAzr/9V+KkqpM4o0V6vKANbvb4Xmn3enC+LkKLs2ubqqyUOZUc70A+l3wd5SHjg==
+
 tsconfig-paths@^3.11.0, tsconfig-paths@^3.9.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz#19769aca6ee8f6a1a341e38c8fa45dd9fb18899b"