diff --git a/site/react/guides/read-from-contract.md b/site/react/guides/read-from-contract.md
index 57f23667f0..b1795717d9 100644
--- a/site/react/guides/read-from-contract.md
+++ b/site/react/guides/read-from-contract.md
@@ -70,6 +70,60 @@ function ReadContract() {
 }
 ```
 
+## Refetching On Blocks
+
+The [`useBlockNumber` Hook](/react/api/hooks/useBlockNumber) can be utilized to refetch or [invalidate](https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation) the contract data on a specific block interval.
+
+:::code-group
+```tsx [read-contract.tsx (refetch)]
+import { useEffect } from 'react'
+import { useBlockNumber, useReadContract } from 'wagmi'
+
+function ReadContract() {
+  const { data: balance, refetch } = useReadContract({
+    ...wagmiContractConfig,
+    functionName: 'balanceOf',
+    args: ['0x03A71968491d55603FFe1b11A9e23eF013f75bCF'],
+  })
+  const { data: blockNumber } = useBlockNumber({ watch: true })
+
+  useEffect(() => {
+    // want to refetch every `n` block instead? use the modulo operator!
+    // if (blockNumber % 5 === 0) refetch() // refetch every 5 blocks
+    refetch()
+  }, [blockNumber])
+
+  return (
+    <div>Balance: {balance?.toString()}</div>
+  )
+}
+```
+```tsx [read-contract.tsx (invalidate)]
+import { useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { useBlockNumber, useReadContract } from 'wagmi'
+
+function ReadContract() {
+  const queryClient = useQueryClient()
+  const { data: balance, refetch } = useReadContract({
+    ...wagmiContractConfig,
+    functionName: 'balanceOf',
+    args: ['0x03A71968491d55603FFe1b11A9e23eF013f75bCF'],
+  })
+  const { data: blockNumber } = useBlockNumber({ watch: true })
+
+  useEffect(() => {
+    // if `useReadContract` is in a different hook/component,
+    // you can import `readContractQueryKey` from `'wagmi/query'` and
+    // construct a one-off query key to use for invalidation
+    queryClient.invalidateQueries({ queryKey })
+  }, [blockNumber, queryClient])
+
+  return (
+    <div>Balance: {balance?.toString()}</div>
+  )
+}
+```
 :::
 
 ## Calling Multiple Functions
diff --git a/site/vue/guides/read-from-contract.md b/site/vue/guides/read-from-contract.md
index 6105c2718c..b2f7c893de 100644
--- a/site/vue/guides/read-from-contract.md
+++ b/site/vue/guides/read-from-contract.md
@@ -75,6 +75,62 @@ const {
 
 :::
 
+<!-- TODO: ## Refetching On Blocks
+
+The [`useBlockNumber` Hook](/react/api/hooks/useBlockNumber) can be utilized to refetch or [invalidate](https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation) the contract data on a specific block interval.
+
+:::code-group
+```tsx [read-contract.tsx (refetch)]
+import { useEffect } from 'react'
+import { useBlockNumber, useReadContract } from 'wagmi'
+
+function ReadContract() {
+  const { data: balance, refetch } = useReadContract({
+    ...wagmiContractConfig,
+    functionName: 'balanceOf',
+    args: ['0x03A71968491d55603FFe1b11A9e23eF013f75bCF'],
+  })
+  const { data: blockNumber } = useBlockNumber({ watch: true })
+
+  useEffect(() => {
+    // want to refetch every `n` block instead? use the modulo operator!
+    // if (blockNumber % 5 === 0) refetch() // refetch every 5 blocks
+    refetch()
+  }, [blockNumber])
+
+  return (
+    <div>Balance: {balance?.toString()}</div>
+  )
+}
+```
+```tsx [read-contract.tsx (invalidate)]
+import { useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { useBlockNumber, useReadContract } from 'wagmi'
+
+function ReadContract() {
+  const queryClient = useQueryClient()
+  const { data: balance, refetch } = useReadContract({
+    ...wagmiContractConfig,
+    functionName: 'balanceOf',
+    args: ['0x03A71968491d55603FFe1b11A9e23eF013f75bCF'],
+  })
+  const { data: blockNumber } = useBlockNumber({ watch: true })
+
+  useEffect(() => {
+    // if `useReadContract` is in a different hook/component,
+    // you can import `readContractQueryKey` from `'wagmi/query'` and
+    // construct a one-off query key to use for invalidation
+    queryClient.invalidateQueries({ queryKey })
+  }, [blockNumber, queryClient])
+
+  return (
+    <div>Balance: {balance?.toString()}</div>
+  )
+}
+```
+::: -->
+
 <!-- TODO: ## Calling Multiple Functions
 
 We can use the [`useReadContract` Hook](/react/api/hooks/useReadContract) multiple times in a single component to call multiple functions on the same contract, but this ends up being hard to manage as the number of functions increases, especially when we also want to deal with loading & error states.