remove QueryClientProvider initialization from graz

graz-sh · Dec 3, 2024 · 5619f52 · 5619f52
1 parent d31c02c
commit 5619f52
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ pnpm add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosm
 
 ## Quick start
 
-Wrap your React app with `<GrazProvider />` and use available `graz` hooks anywhere:
+Wrap your React app with `<QueryClientProvider />` and `<GrazProvider />`, and use available `graz` hooks anywhere:
 
 ```jsx
 import { GrazProvider } from "graz";
@@ -65,11 +65,13 @@ const cosmoshub: ChainInfo = {
 
 function App() {
   return (
-    <GrazProvider grazOptions={{
-      chains: [cosmoshub]
-    }}>
-      <Wallet />
-    </GrazProvider>
+    <QueryClientProvider queryClient={queryClient}>
+      <GrazProvider grazOptions={{
+        chains: [cosmoshub]
+      }}>
+        <Wallet />
+      </GrazProvider>
+    </QueryClientProvider>
   );
 }
 ```

diff --git a/docs/docs/index.md b/docs/docs/index.md
@@ -52,7 +52,7 @@ pnpm add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosm
 
 ## Quick start
 
-Wrap your React app with `<GrazProvider />` and use available `graz` hooks anywhere:
+Wrap your React app with `<QueryClientProvider />` and `<GrazProvider />`, and use available `graz` hooks anywhere:
 
 ```tsx
 import { GrazProvider } from "graz";
@@ -65,13 +65,15 @@ const cosmoshub: ChainInfo = {
 
 function App() {
   return (
-    <GrazProvider
-      grazOptions={{
-        chains: [cosmoshub],
-      }}
-    >
-      <Wallet />
-    </GrazProvider>
+    <QueryClientProvider queryClient={queryClient}>
+      <GrazProvider
+        grazOptions={{
+          chains: [cosmoshub],
+        }}
+      >
+        <Wallet />
+      </GrazProvider>
+    </QueryClientProvider>
   );
 }
 ```

diff --git a/docs/docs/provider/grazProvider.md b/docs/docs/provider/grazProvider.md
@@ -1,6 +1,7 @@
 # GrazProvider
 
-Provider component which wraps @tanstack/react-query's `QueryClientProvider` and various graz side effects
+Provider component which configures various graz side effects.
+Graz uses `@tanstack/react-query`'s features under the hood, hence you need to wrap `GrazProvider` with `QueryClientProvider`.
 
 #### Usage
 
@@ -11,44 +12,48 @@ const cosmoshub = {
   chainId: "cosmoshub-4",
   chainName: "Cosmos Hub",
   // ... rest of cosmoshub ChainInfo
-}
+};
 
 const sommelier = {
   chainId: "sommelier-1",
   chainName: "Sommelier",
   // ... rest of sommelier ChainInfo
-}
+};
 
 // example next.js application in _app.tsx
 export default function CustomApp({ Component, pageProps }: AppProps) {
+  const onNotFound = () => {
+    console.log("not found");
+  };
+
   return (
-    <GrazProvider
-      grazOptions={{
-        chains: [cosmoshub, sommelier],
-        chainsConfig: {
-          "cosmoshub-4": {
-            gas: {
-              price: "",
-              denom: ""
-            }
+    <QueryClientProvider queryClient={queryClient}>
+      <GrazProvider
+        grazOptions={{
+          chains: [cosmoshub, sommelier],
+          chainsConfig: {
+            "cosmoshub-4": {
+              gas: {
+                price: "",
+                denom: "",
+              },
+            },
+            "sommelier-1": {
+              gas: {
+                price: "",
+                denom: "",
+              },
+            },
           },
-          "sommelier-1": {
-            gas: {
-              price: "",
-              denom: ""
-            }
-          }
-        }
-        defaultWallet: WalletType.LEAP,
-        onNotFound: () => {
-          console.log("not found")
-        },
-        multiChainFetchConcurrency: 6
-        // ...
-      }}
-    >
-      <Component {...pageProps} />
-    </GrazProvider>
+          defaultWallet: WalletType.LEAP,
+          onNotFound,
+          multiChainFetchConcurrency: 6,
+          // ...
+        }}
+      >
+        <Component {...pageProps} />
+      </GrazProvider>
+    </QueryClientProvider>
   );
 }
 ```

diff --git a/packages/graz/package.json b/packages/graz/package.json
@@ -1,7 +1,7 @@
 {
   "name": "graz",
   "description": "React hooks for Cosmos",
-  "version": "0.1.29",
+  "version": "0.2.0",
   "author": "Griko Nibras <[email protected]>",
   "repository": "https://github.com/graz-sh/graz.git",
   "homepage": "https://github.com/graz-sh/graz",
@@ -49,6 +49,7 @@
     "@cosmjs/stargate": "<=0.31.3",
     "@cosmjs/tendermint-rpc": "<=0.31.3",
     "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.41",
+    "@tanstack/react-query": "5.62.0",
     "react": ">=17"
   },
   "dependencies": {
@@ -57,7 +58,6 @@
     "@dao-dao/cosmiframe": "0.1.0",
     "@keplr-wallet/cosmos": "0.12.156",
     "@metamask/providers": "12.0.0",
-    "@tanstack/react-query": "5.62.0",
     "@terra-money/station-connector": "1.1.0",
     "@vectis/extension-client": "^0.7.2",
     "@walletconnect/sign-client": "2.17.2",

diff --git a/packages/graz/src/provider/index.tsx b/packages/graz/src/provider/index.tsx
@@ -1,49 +1,43 @@
-import type { QueryClientProviderProps } from "@tanstack/react-query";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { type FC, useEffect } from "react";
+import { type FC, type ReactNode, useEffect } from "react";
 
 import type { ConfigureGrazArgs } from "../actions/configure";
 import { configureGraz } from "../actions/configure";
 import { ClientOnly } from "./client-only";
 import { GrazEvents } from "./events";
 
-const queryClient = new QueryClient({
-  //
-});
-
-export type GrazProviderProps = Partial<QueryClientProviderProps> & {
+export interface GrazProviderProps {
   grazOptions: ConfigureGrazArgs;
-};
+  children: ReactNode;
+}
 
 /**
- * Provider component which extends `@tanstack/react-query`'s {@link QueryClientProvider} with built-in query client
- * and various `graz` side effects
- *
+ * Provider component configures various `graz` side effects.
+ * Graz uses `@tanstack/react-query`'s features under the hood, hence you need to wrap `GrazProvider` with `QueryClientProvider`.
  * @example
  * ```tsx
  * // example next.js application in _app.tsx
  * export default function CustomApp({ Component, pageProps }: AppProps) {
  *   return (
- *     <GrazProvider>
- *       <Component {...pageProps} />
- *     </GrazProvider>
+ *     <QueryClientProvider queryClient={queryClient}>
+ *       <GrazProvider grazOptions={grazOptions}>
+ *         <Component {...pageProps} />
+ *       </GrazProvider>
+ *     </QueryClientProvider>
  *   );
  * }
  * ```
  *
  * @see https://tanstack.com/query
  */
-export const GrazProvider: FC<GrazProviderProps> = ({ children, grazOptions, ...props }) => {
+export const GrazProvider: FC<GrazProviderProps> = ({ children, grazOptions }) => {
   useEffect(() => {
     configureGraz(grazOptions);
   }, [grazOptions]);
 
   return (
-    <QueryClientProvider key="graz-provider" client={queryClient} {...props}>
-      <ClientOnly>
-        {children}
-        <GrazEvents />
-      </ClientOnly>
-    </QueryClientProvider>
+    <ClientOnly>
+      {children}
+      <GrazEvents />
+    </ClientOnly>
   );
 };