fix: use provider for graphql client

.prettierignore

@@ -3,4 +3,5 @@ node_modules
 dist
 dist-ssr
 *.local
-node_modules/*
+node_modules/*
+src/gql/

src/graphqlRequestContext.ts

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

src/hooks/use-query.ts

@@ -1,4 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
+import { ProposalsByGroupPolicyAddressDocument } from 'gql/graphql'
+import { useGraphQLClient } from 'graphqlRequestContext'
 
 import { fetchAllBalances } from 'api/bank.actions'
 import {
@@ -15,8 +17,6 @@ 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'
 
@@ -101,7 +101,7 @@ export function useGroupHistoricalProposals(groupId?: string) {
     queryFn: async () => {
       const proposals = await Promise.all(
         policyIds.map(async (address) => {
-          const res = await client.request(ProposalsByGroupPolicyAddressDocument, {
+          const res = await client!.request(ProposalsByGroupPolicyAddressDocument, {
             groupPolicyAddress: address,
           })
           return res.allProposals?.nodes

src/main.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { ReactQueryProvider } from 'react-query-provider'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { GraphQLClient } from 'graphql-request'
+import { GraphqlRequestContext } from 'graphqlRequestContext'
 import { ThemeProvider } from 'theme'
 
 import App from './App'
@@ -11,13 +13,17 @@ import './main.css'
 const container = document.getElementById('root')
 const root = createRoot(container as HTMLElement)
 
+const client = new GraphQLClient('http://localhost:5000/indexer/graphql')
+
 root.render(
   <React.StrictMode>
-    <ReactQueryProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
-      <ThemeProvider>
-        <App />
-      </ThemeProvider>
-    </ReactQueryProvider>
+    <GraphqlRequestContext.Provider value={client}>
+      <ReactQueryProvider>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <ThemeProvider>
+          <App />
+        </ThemeProvider>
+      </ReactQueryProvider>
+    </GraphqlRequestContext.Provider>
   </React.StrictMode>,
 )