docs: close #4344

wevm · Nov 5, 2024 · 254f8f7 · 254f8f7
1 parent ecac0ba
commit 254f8f7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/site/.vitepress/sidebar.ts b/site/.vitepress/sidebar.ts
@@ -226,14 +226,14 @@ export function getSidebar() {
             text: 'useInfiniteReadContracts',
             link: '/react/api/hooks/useInfiniteReadContracts',
           },
-          {
-            text: 'useReadContract',
-            link: '/react/api/hooks/useReadContract',
-          },
           {
             text: 'usePrepareTransactionRequest',
             link: '/react/api/hooks/usePrepareTransactionRequest',
           },
+          {
+            text: 'useReadContract',
+            link: '/react/api/hooks/useReadContract',
+          },
           {
             text: 'useReadContracts',
             link: '/react/api/hooks/useReadContracts',

diff --git a/site/react/guides/read-from-contract.md b/site/react/guides/read-from-contract.md
@@ -5,7 +5,6 @@ The [`useReadContract` Hook](/react/api/hooks/useReadContract) allows you to rea
 The component below shows how to retrieve the token balance of an address from the [Wagmi Example](https://etherscan.io/token/0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2) contract
 
 :::code-group
-
 ```tsx [read-contract.tsx]
 import { useReadContract } from 'wagmi'
 
@@ -21,9 +20,21 @@ function ReadContract() {
   )
 }
 ```
-
 :::
 
+If `useReadContract` depends on another value (`address` in the example below), you can use the [`query.enabled`](http://localhost:5173/react/api/hooks/useReadContract#enabled) option to prevent the query from running until the dependency is ready.
+
+```tsx
+const { data: balance } = useReadContract({
+  ...wagmiContractConfig,
+  functionName: 'balanceOf',
+  args: [address],
+  query: { // [!code focus]
+    enabled: !!address, // [!code focus]
+  }, // [!code focus]
+})
+```
+
 ## Loading & Error States
 
 The [`useReadContract` Hook](/react/api/hooks/useReadContract) also returns loading & error states, which can be used to display a loading indicator while the data is being fetched, or an error message if contract execution reverts.

diff --git a/site/vue/guides/read-from-contract.md b/site/vue/guides/read-from-contract.md
@@ -26,6 +26,21 @@ const { data: balance } = useReadContract({
 
 :::
 
+
+If `useReadContract` depends on another value (`address` in the example below), you can use the [`query.enabled`](http://localhost:5173/vue/api/composables/useReadContract#enabled) option to prevent the query from running until the dependency is ready.
+
+```tsx
+const { data: balance } = useReadContract({
+  ...wagmiContractConfig,
+  functionName: 'balanceOf',
+  args: [address],
+  query: { // [!code focus]
+    enabled: !!address, // [!code focus]
+  }, // [!code focus]
+})
+```
+
+
 ## Loading & Error States
 
 The [`useReadContract` Composable](/vue/api/composables/useReadContract) also returns loading & error states, which can be used to display a loading indicator while the data is being fetched, or an error message if contract execution reverts.