feat: add useGraphQLClient and useGroupHistoricalProposals

src/App.tsx

@@ -7,17 +7,10 @@ import { Wallet } from 'store/wallet.store'
 import { EnableKeplr } from 'pages/enable-keplr-page'
 import { InstallKeplr } from 'pages/install-keplr-page'
 import { Loading } from '@/molecules/loading'
-import request from 'graphql-request'
-import { useQuery } from '@tanstack/react-query'
-import { AllProposalsDocument } from 'gql/graphql'
 
 export default function App() {
   useKeplr()
   const snap = useSnapshot(Wallet)
-  const { data } = useQuery(['proposals'], async () =>
-    request('http://localhost:5000/indexer/graphql', AllProposalsDocument),
-  )
-  console.log(data?.allProposals?.nodes)
 
   switch (snap.keplrStatus) {
     case 'ready':

src/graphqlRequestContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react'
+import { GraphQLClient } from 'graphql-request'
+
+const client = new GraphQLClient('http://localhost:5000/indexer/graphql')
+
+const GraphqlRequestContext = createContext(client)
+
+export function useGraphQLClient() {
+  return useContext(GraphqlRequestContext)
+}

src/hooks/use-query.ts

@@ -15,6 +15,8 @@ import {
   fetchVotesByProposal,
 } from 'api/proposal.actions'
 import { fetchValidators } from 'api/staking.actions'
+import { ProposalsByGroupPolicyAddressDocument } from 'gql/graphql'
+import { useGraphQLClient } from 'graphqlRequestContext'
 import { Chain } from 'store/chain.store'
 import { Wallet } from 'store/wallet.store'
 
@@ -90,6 +92,27 @@ export function useGroupProposals(groupId?: string) {
   })
 }
 
+export function useGroupHistoricalProposals(groupId?: string) {
+  const { data: policies, isLoading } = useGroupPolicies(groupId)
+  const policyIds = policies?.map((p) => p.address) || []
+  const client = useGraphQLClient()
+  return useQuery({
+    queryKey: ['historicalProposals', groupId],
+    queryFn: async () => {
+      const proposals = await Promise.all(
+        policyIds.map(async (address) => {
+          const res = await client.request(ProposalsByGroupPolicyAddressDocument, {
+            groupPolicyAddress: address,
+          })
+          return res.allProposals?.nodes
+        }),
+      )
+      return proposals.flat()
+    },
+    enabled: !isLoading,
+  })
+}
+
 export function useBalances(address?: string) {
   return useQuery({
     queryKey: ['balances', address],

src/pages/group-page.tsx

@@ -9,6 +9,7 @@ import { useDerivedProposals } from 'hooks/use-derived-proposals'
 import {
   useBalances,
   useGroup,
+  useGroupHistoricalProposals,
   useGroupPolicies,
   useGroupProposals,
 } from 'hooks/use-query'
@@ -22,6 +23,8 @@ export default function GroupPage() {
   const { data: group, isLoading: isLoadingGroup } = useGroup(groupId)
   const { data: policies, isLoading: isLoadingPolicies } = useGroupPolicies(groupId)
   const { data: proposals, isLoading: isLoadingProposals } = useGroupProposals(groupId)
+  const { data: historicalProposals, isLoading: isLoadingHistoricalProposals } =
+    useGroupHistoricalProposals(groupId)
   const { toastSuccess, toastErr } = useTxToasts()
 
   const groupPolicy = policies?.[0]
@@ -37,12 +40,15 @@ export default function GroupPage() {
     isLoadingGroup ||
     isLoadingPolicies ||
     isLoadingProposals ||
+    isLoadingHistoricalProposals ||
     isInitialLoadingBalances ||
     isRefetchingBalances
   ) {
     return <Loading />
   }
 
+  console.log({ proposals, historicalProposals })
+
   if (!group) {
     logError('Group not found')
     redirect('/')