Proposal data caching

package.json

@@ -28,6 +28,7 @@
     "react-lines-ellipsis": "^0.15.0",
     "react-media": "^1.10.0",
     "react-modal": "^3.13.1",
+    "react-query": "^3.19.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/components/governance/hooks/useGovernanceProposals.ts

@@ -3,6 +3,7 @@ import {
   SnapshotProposalResponse,
   SnapshotType,
 } from '@openlaw/snapshot-js-erc712';
+import {useQuery} from 'react-query';
 
 import {AsyncStatus} from '../../../util/types';
 import {BURN_ADDRESS} from '../../../util/constants';
@@ -48,13 +49,29 @@ export function useGovernanceProposals({
 
   const {isMountedRef} = useIsMounted();
 
+  /**
+   * React Query
+   */
+
+  const {
+    data: snapshotProposalEntriesData,
+    error: snapshotProposalEntriesError,
+  } = useQuery(
+    ['snapshotProposalEntries', actionId],
+    async () => await getSnapshotProposalsByActionId(actionId),
+    {
+      enabled: !!actionId,
+    }
+  );
+
   /**
    * Cached callbacks
    */
 
   const handleGetProposalsCached = useCallback(handleGetProposals, [
-    actionId,
     isMountedRef,
+    snapshotProposalEntriesData,
+    snapshotProposalEntriesError,
   ]);
 
   /**
@@ -119,14 +136,16 @@ export function useGovernanceProposals({
     try {
       setGovernanceProposalsStatus(AsyncStatus.PENDING);
 
-      const snapshotProposalEntries = await getSnapshotProposalsByActionId(
-        actionId
-      );
+      if (snapshotProposalEntriesError) {
+        throw snapshotProposalEntriesError;
+      }
 
-      if (!isMountedRef.current) return;
+      if (snapshotProposalEntriesData) {
+        if (!isMountedRef.current) return;
 
-      setGovernanceProposalsStatus(AsyncStatus.FULFILLED);
-      setGovernanceProposals(snapshotProposalEntries);
+        setGovernanceProposalsStatus(AsyncStatus.FULFILLED);
+        setGovernanceProposals(snapshotProposalEntriesData);
+      }
     } catch (error) {
       if (!isMountedRef.current) return;