how to use tanstackquery in wagmi hooks,i want my hook to execute only when the user gives the input value but i cant place the readcontract hook inside the function. in documentation, they just mentioned to set enabled is false to stop to it from autorunning ,but no syntax in the docs:[
import React, { useState, useEffect } from 'react';
import { useReadContract } from 'wagmi';
import { abi } from "./abis/abi";
const FileRetrieve = () => {
const [tokenId, setTokenId] = useState("");
const [imgUrl, setImgUrl] = useState("");
const { data, error, isError } = useReadContract({
abi,
address: '0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512',
functionName: 'getDocument',
args: [BigInt(tokenId)] // only fetch when tokenId is set
});
useEffect(() => {
if (data) {
console.log(data);
}
if (isError) {
console.error("Error retrieving document from blockchain:", error);
}
}, [data, isError, error]);
const handleRetrieve = () => {
if (!tokenId) {
alert("Please enter a token ID");
return;
}
// Since we're using `useReadContract` with the `enabled` option,
// it will automatically fetch the document when `tokenId` is set.
};
return (
<div className="retrieve-container">
<input
type="text"
placeholder="Enter Token ID"
value={tokenId}
onChange={(e) => setTokenId(e.target.value)}
className="token-input"
/>
<button onClick={handleRetrieve} className="retrieve-button">
Retrieve File
</button>
<div className="image-container">
{imgUrl && (
<img
src={imgUrl}
alt="Retrieved from IPFS"
className="retrieved-image"
/>
)}
</div>
</div>
);
};
export default FileRetrieve;