Proposal data caching (#453)

* WIP cache proposal data

* WIP use queryClient

* WIP refactor with useQuery hooks

* apply caching strategy to governance proposals

* apply proposal data caching to individual proposal details

* Revert "apply proposal data caching to individual proposal details"

This reverts commit 3261578.

* Revert "Revert "apply proposal data caching to individual proposal details""

This reverts commit faa91be.

* WIP refetch for proposal actions updates

* fix proposal action transitions

* format comment

* fix proposal action transitions

* format comments

* WIP update tests

* clean up hook after caching update

* update useProposals unit tests

* update useGovernanceProposals unit tests

* update useDaoProposals unit test

* update comment

* WIP fix last of failing tests

* remove react query dev tools

* update queryClient import in setupTests

* update testing clear cache

* fixes outdated env vars being set

* fixes useProposalsVotes tests and makes slight improvements to code

* improve use of react queries

Co-authored-by: Jeremiah Naylor-Trein <jeremiahtrein@gmail.com>

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;