Configure the properties of the useReadContract
hook.
useReadContract
useReadContract
hook has a number of configurable properties that will allow you to adapt it to your needs. You can combine the functionality of TanStack queries with useBlockNumber
to watch the blockchain for changes, although doing so will consume a number of API calls.
useBlockNumber
and the queryClient
to automatically fetch updates from the blockchainpure
or view
smart contract functionuseReadContract
on demandisLoading
and isFetching
to improve user experienceuseReadContract
hook.
Once the excitement of your accomplishment of finally reading from your own contract subsides, try using BaseScan to add another issue, or vote on an existing issue. You’ll notice that your frontend does not update. There are a few ways to handle this.
Fetch updates from the blockchain
useBlockNumber
with the watch
feature to automatically keep track of the block number, then use the queryClient
to update when that changes. Make sure you decompose the queryKey
from the return of useReadContract
.useReadContracts
, or consolidate your view
s into a single function that fetches all the data you need in one call.Pause on blur
watch
for useBlockNumber
so that it only does so if pageIsFocused
.useEffect
for blockNumber
and increment your counter as well.Adjust the polling rate
pollingInterval
by setting it in getDefaultConfig
in _app.tsx
:Update on demand
watch
to equal triggerRead
, instead of pageIsFocused
, and reset triggerRead
in the useEffect
.Set UI elements based on status
Pass arguments to useReadContract
useReadContract
hook by adding an array of arguments, in order, to the args
property. Common practice is to use React state variables set by UI elements to enable the arguments to be set and modified. For example, you might create a drop-down to set issueNumber
, then fetch that issue with:watch
feature of useBlockNumber
combined with useEffect
and queryClient.invalidateQueries
to enable your frontend to see updates to your smart contract. You’ve also learned the costs of doing so, and some strategies for mitigation. You’ve learned how to pass arguments to your functions. Finally, you’ve learned how to use the properties returned by useReadContract
to adjust your UI to improve the experience for your users.