[Breaking Change]: Update react-query to v5.62.0 (#179)

graz-sh · Dec 10, 2024 · f6ff768 · f6ff768
2 parents 1cbf5a7 + 3453cec
commit f6ff768
Show file tree

Hide file tree

Showing 17 changed files with 292 additions and 248 deletions.
diff --git a/README.md b/README.md
@@ -52,11 +52,14 @@ 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 { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { GrazProvider } from "graz";
 
+const queryClient = new QueryClient();
+
 const cosmoshub: ChainInfo = {
   chainId: "cosmoshub-4",
   chainName: "Cosmos Hub",
@@ -65,11 +68,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,11 +52,14 @@ 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 { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { GrazProvider } from "graz";
 
+const queryClient = new QueryClient();
+
 const cosmoshub: ChainInfo = {
   chainId: "cosmoshub-4",
   chainName: "Cosmos Hub",
@@ -65,13 +68,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/migration-guide.md b/docs/docs/migration-guide.md
@@ -4,6 +4,25 @@ sidebar_position: 3
 
 # Migration Guide
 
+## 0.2.0 Breaking Changes
+
+We updates the react-query version to 5.62.0 and removes QueryClientProvider initialisation from Graz Provider. As a results, dApps must now wrap Graz provider with QueryClientProvider on their end. Also note that react-query has been added as peer dependency now.
+
+```diff
++ import { QueryClient, QueryClientProvider } from 'react-query';
+  import { GrazProvider } from 'graz';
+
++  const queryClient = new QueryClient();
+
++  <QueryClientProvider client={queryClient}>
+    <GrazProvider grazOptions={{
+      // ... Your options
+    }}>
+      // children
+    </GrazProvider>
++  </QueryClientProvider>
+```
+
 ## 0.1.26 Breaking Changes
 
 ### WalletConnect

diff --git a/docs/docs/provider/grazProvider.md b/docs/docs/provider/grazProvider.md
@@ -1,54 +1,62 @@
 # 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
 
 ```tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { GrazProvider, WalletType } from "graz";
 
+const queryClient = new QueryClient();
+
 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/example/next/package.json b/example/next/package.json
@@ -13,6 +13,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.58",
+    "@tanstack/react-query": "5.62.0",
     "framer-motion": "^10.16.4",
     "graz": "workspace:*",
     "next": "^13.4.19",

diff --git a/example/next/pages/_app.tsx b/example/next/pages/_app.tsx
@@ -1,37 +1,42 @@
 import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { GrazProvider } from "graz";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import { chains } from "utils/graz";
 
+const queryClient = new QueryClient();
+
 const theme = extendTheme();
 
 const CustomApp: NextPage<AppProps> = ({ Component, pageProps }) => {
   return (
     <ChakraProvider resetCSS theme={theme}>
-      <GrazProvider
-        grazOptions={{
-          chains,
-          onReconnectFailed: () => {
-            console.log("reconnect failed");
-          },
-          autoReconnect: false,
-          walletConnect: {
-            options: {
-              projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
+      <QueryClientProvider client={queryClient}>
+        <GrazProvider
+          grazOptions={{
+            chains,
+            onReconnectFailed: () => {
+              console.log("reconnect failed");
+            },
+            autoReconnect: false,
+            walletConnect: {
+              options: {
+                projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
+              },
+            },
+            capsuleConfig: {
+              apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY,
+              env: process.env.NEXT_PUBLIC_CAPSULE_ENV,
+            },
+            iframeOptions: {
+              allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone", "http://localhost:3000"],
             },
-          },
-          capsuleConfig: {
-            apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY,
-            env: process.env.NEXT_PUBLIC_CAPSULE_ENV,
-          },
-          iframeOptions: {
-            allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone", "http://localhost:3000"],
-          },
-        }}
-      >
-        <Component {...pageProps} />
-      </GrazProvider>
+          }}
+        >
+          <Component {...pageProps} />
+        </GrazProvider>
+      </QueryClientProvider>
     </ChakraProvider>
   );
 };

diff --git a/example/starter/package.json b/example/starter/package.json
@@ -16,6 +16,7 @@
     "@emotion/styled": "11.11.0",
     "@graz-sh/types": "^0.0.4",
     "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.58",
+    "@tanstack/react-query": "5.62.0",
     "bignumber.js": "^9.1.2",
     "framer-motion": "^10.16.4",
     "graz": "workspace:*",

diff --git a/example/starter/src/pages/_app.tsx b/example/starter/src/pages/_app.tsx
@@ -1,9 +1,12 @@
 import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { GrazProvider } from "graz";
 import type { AppProps } from "next/app";
 import { Layout } from "src/ui/layout";
 import { mainnetChains } from "src/utils/graz";
 
+const queryClient = new QueryClient();
+
 const theme = extendTheme({
   semanticTokens: {
     colors: {
@@ -21,34 +24,36 @@ const theme = extendTheme({
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
-    <GrazProvider
-      grazOptions={{
-        chains: mainnetChains,
-        walletConnect: {
-          options: {
-            projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
+    <QueryClientProvider client={queryClient}>
+      <GrazProvider
+        grazOptions={{
+          chains: mainnetChains,
+          walletConnect: {
+            options: {
+              projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
+            },
+          },
+          capsuleConfig: {
+            apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY,
+            env: process.env.NEXT_PUBLIC_CAPSULE_ENV,
+          },
+          walletDefaultOptions: {
+            sign: {
+              preferNoSetFee: true,
+            },
           },
-        },
-        capsuleConfig: {
-          apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY,
-          env: process.env.NEXT_PUBLIC_CAPSULE_ENV,
-        },
-        walletDefaultOptions: {
-          sign: {
-            preferNoSetFee: true,
+          iframeOptions: {
+            allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone"],
           },
-        },
-        iframeOptions: {
-          allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone"],
-        },
-      }}
-    >
-      <ChakraProvider resetCSS theme={theme}>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </ChakraProvider>
-    </GrazProvider>
+        }}
+      >
+        <ChakraProvider resetCSS theme={theme}>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </ChakraProvider>
+      </GrazProvider>
+    </QueryClientProvider>
   );
 };
 

diff --git a/example/vite/package.json b/example/vite/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "5.62.0",
     "graz": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/example/vite/src/main.tsx b/example/vite/src/main.tsx
@@ -1,20 +1,30 @@
 import "./index.css";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { GrazProvider } from "graz";
 import { cosmoshub } from "graz/chains";
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 
 import App from "./App";
 
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <GrazProvider
-      grazOptions={{
-        chains: [cosmoshub],
-      }}
-    >
-      <App />
-    </GrazProvider>
+    <QueryClientProvider client={queryClient}>
+      <GrazProvider
+        grazOptions={{
+          chains: [cosmoshub],
+          capsuleConfig: {
+            apiKey: import.meta.env.VITE_CAPSULE_API_KEY as string,
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            env: (import.meta.env.VITE_CAPSULE_ENV as "DEV" | "SANDBOX" | "BETA" | "PROD") || "DEV",
+          },
+        }}
+      >
+        <App />
+      </GrazProvider>
+    </QueryClientProvider>
   </React.StrictMode>,
 );