docs: up

Author: tmm

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

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.