diff --git a/site/.vitepress/sidebar.ts b/site/.vitepress/sidebar.ts index e08ff57314..da4d4bf5e2 100644 --- 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 index c63ebf9f91..2d53ae8849 100644 --- 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 index 28b3cf36e7..1993ceaa70 100644 --- 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.