updated docs per feedback

Author: soheimam

docs/get-started/build-app.mdx

@@ -257,13 +257,17 @@ Base is a fast, low-cost Ethereum L2 built to bring the next billion users oncha
     ```typescript components/IncrementButton.tsx lines expandable
     'use client'
 
+    import { useEffect } from 'react'
     import {
       useWriteContract,
       useWaitForTransactionReceipt,
       useChainId,
       useSwitchChain,
     } from 'wagmi'
+    import { readContractQueryOptions } from 'wagmi/query'
+    import { useQueryClient } from '@tanstack/react-query'
     import { baseSepolia } from 'wagmi/chains'
+    import { config } from '@/config/wagmi'
     import { COUNTER_ADDRESS, counterAbi } from '@/config/counter'
 
     export function IncrementButton() {
@@ -272,6 +276,20 @@ Base is a fast, low-cost Ethereum L2 built to bring the next billion users oncha
       const { data: hash, isPending, writeContract } = useWriteContract()
       const { isLoading: isConfirming, isSuccess } =
         useWaitForTransactionReceipt({ hash })
+      const queryClient = useQueryClient()
+
+      useEffect(() => {
+        if (isSuccess) {
+          queryClient.invalidateQueries({
+            queryKey: readContractQueryOptions(config, {
+              address: COUNTER_ADDRESS,
+              abi: counterAbi,
+              functionName: 'number',
+              chainId: baseSepolia.id,
+            }).queryKey,
+          })
+        }
+      }, [isSuccess, queryClient])
 
       if (chainId !== baseSepolia.id) {
         return (
@@ -311,6 +329,10 @@ Base is a fast, low-cost Ethereum L2 built to bring the next billion users oncha
     }
     ```
 
+    <Note>
+    `useReadContract` caches its result and does not automatically refetch after a write. Use `queryClient.invalidateQueries` with the read's query key to trigger a single refetch when a transaction confirms.
+    </Note>
+
     Surface three states to the user: waiting for wallet signature, waiting for on-chain confirmation, and success.
 
     <Warning>
@@ -355,6 +377,7 @@ Base is a fast, low-cost Ethereum L2 built to bring the next billion users oncha
     ```typescript components/BatchIncrement.tsx lines expandable
     'use client'
 
+    import { useEffect } from 'react'
     import {
       useSendCalls,
       useWaitForCallsStatus,
@@ -364,11 +387,21 @@ Base is a fast, low-cost Ethereum L2 built to bring the next billion users oncha
       useChainId,
       useSwitchChain,
     } from 'wagmi'
+    import { readContractQueryOptions } from 'wagmi/query'
+    import { useQueryClient } from '@tanstack/react-query'
     import { encodeFunctionData } from 'viem'
     import { baseSepolia } from 'wagmi/chains'
+    import { config } from '@/config/wagmi'
     import { useWalletCapabilities } from '@/hooks/useWalletCapabilities'
     import { COUNTER_ADDRESS, counterAbi } from '@/config/counter'
 
+    const counterQueryKey = readContractQueryOptions(config, {
+      address: COUNTER_ADDRESS,
+      abi: counterAbi,
+      functionName: 'number',
+      chainId: baseSepolia.id,
+    }).queryKey
+
     export function BatchIncrement() {
       const { isConnected } = useAccount()
       const { supportsBatching } = useWalletCapabilities()
@@ -385,6 +418,13 @@ Base is a fast, low-cost Ethereum L2 built to bring the next billion users oncha
       const { isLoading: isConfirming, isSuccess } = useWaitForCallsStatus({
         id: data?.id,
       })
+      const queryClient = useQueryClient()
+
+      useEffect(() => {
+        if (isSuccess) {
+          queryClient.invalidateQueries({ queryKey: counterQueryKey })
+        }
+      }, [isSuccess, queryClient])
 
       if (chainId !== baseSepolia.id) {
         return (
@@ -428,7 +468,15 @@ Base is a fast, low-cost Ethereum L2 built to bring the next billion users oncha
       const chainId = useChainId()
       const { switchChain, isPending: isSwitching } = useSwitchChain()
       const { data: hash, isPending, writeContract } = useWriteContract()
-      const { isLoading: isConfirming } = useWaitForTransactionReceipt({ hash })
+      const { isLoading: isConfirming, isSuccess } =
+        useWaitForTransactionReceipt({ hash })
+      const queryClient = useQueryClient()
+
+      useEffect(() => {
+        if (isSuccess) {
+          queryClient.invalidateQueries({ queryKey: counterQueryKey })
+        }
+      }, [isSuccess, queryClient])
 
       if (chainId !== baseSepolia.id) {
         return (