fix: queryClient | remove refetch effect

defi-wonderland · Jul 15, 2024 · 7ab5a8d · 7ab5a8d
1 parent a0ca85a
commit 7ab5a8d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 21 deletions.
diff --git a/src/providers/DataProvider.tsx b/src/providers/DataProvider.tsx
@@ -1,5 +1,5 @@
-import { createContext, useState, useEffect } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { createContext, useState, useEffect, ReactNode } from 'react';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 
 import { ChainData, EcosystemData } from '~/types';
@@ -11,13 +11,14 @@ type ContextType = {
 
   isEcosystemLoading: boolean;
   isChainLoading: boolean;
+  refetchChainData: (options: { throwOnError: boolean; cancelRefetch: boolean }) => Promise<UseQueryResult>;
 
   ecosystemData: EcosystemData;
   chainData: ChainData;
 };
 
 interface DataProps {
-  children: React.ReactElement;
+  children: ReactNode;
 }
 
 export const DataContext = createContext({} as ContextType);
@@ -46,12 +47,6 @@ export const DataProvider = ({ children }: DataProps) => {
     enabled: !!selectedChain?.chainId,
   });
 
-  useEffect(() => {
-    if (selectedChain) {
-      refetchChainData();
-    }
-  }, [selectedChain, refetchChainData]);
-
   useEffect(() => {
     if (isEcosystemError || isChainError) {
       router.push('/error');
@@ -67,6 +62,7 @@ export const DataProvider = ({ children }: DataProps) => {
         isChainLoading,
         ecosystemData,
         chainData,
+        refetchChainData,
       }}
     >
       {children}

diff --git a/src/providers/index.tsx b/src/providers/index.tsx
@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
 import { StateProvider } from './StateProvider';
 import { ThemeProvider } from './ThemeProvider';
@@ -10,18 +9,14 @@ type Props = {
   children: ReactNode;
 };
 
-const queryClient = new QueryClient();
-
 export const Providers = ({ children }: Props) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider>
-        <StateProvider>
-          <DataProvider>
-            <WalletProvider>{children}</WalletProvider>
-          </DataProvider>
-        </StateProvider>
-      </ThemeProvider>
-    </QueryClientProvider>
+    <ThemeProvider>
+      <StateProvider>
+        <WalletProvider>
+          <DataProvider>{children}</DataProvider>
+        </WalletProvider>
+      </StateProvider>
+    </ThemeProvider>
   );
 };