I’m working on a Next.js application and using Wagmi to interact with a smart contract. The issue I'm facing is that when I call the getDoubledNumber() and number() functions from the frontend using wagmi, both return undefined.
However, when I test the same functions using Remix IDE, they return the correct values, so the smart contract itself seems to be working fine.
I’ve tried different configurations and methods (like using useReadContract properly), but the problem still persists on the frontend. I'm not seeing any errors in the console either — just undefined for both values.
I’ve confirmed that:
The contract address and ABI are correct. I'm connected to the right chain and account. The functions are view/pure and don’t require gas. No errors are shown in the console — just undefined results. // page.tsx "use client"; import { useAccount, useReadContract, useWriteContract } from "wagmi"; import React, { useEffect, useState } from "react"; export default function Home() { const { address, isConnected } = useAccount(); useEffect(() => { console.log("Component is started"); }, [isConnected]); const wagmiContractConfig = { address: "0x131E3c5Ae6F6879e3f622d176Df1E74d6Bd5bc71", abi: [ { inputs: [], name: "increment", outputs: [], stateMutability: "nonpayable", type: "function", }, { inputs: [], name: "getDoubledNumber", outputs: [{ internalType: "uint256", name: "", type: "uint256" }], stateMutability: "view", type: "function", }, { inputs: [], name: "number", outputs: [{ internalType: "uint256", name: "", type: "uint256" }], stateMutability: "view", type: "function", }, ], }; // استخدام useReadContract بدون refetch const { data: counter, isLoading: isLoadingCounter, isError: isErrorCounter } = useReadContract({ ...wagmiContractConfig, functionName: "getDoubledNumber", }); const { data: num, isLoading: isLoadingNumber, isError: isErrorNumber } = useReadContract({ ...wagmiContractConfig, functionName: "number", }); const { writeContract } = useWriteContract(); const handleIncrement = async () => { try { await writeContract({ ...wagmiContractConfig, functionName: "increment", }); console.log("Increment successful"); } catch (error) { console.error("Increment failed:", error); } }; // Logs to check the fetched data useEffect(() => { if (!isLoadingCounter && !isErrorCounter) { console.log("Counter fetched:", counter); } if (!isLoadingNumber && !isErrorNumber) { console.log("Number fetched:", num); } }, [counter, num, isLoadingCounter, isLoadingNumber, isErrorCounter, isErrorNumber]); return ( <> <div className="p-4 m-4"> <w3m-button /> <w3m-network-button /> </div> <div className="p-4 m-4 cursor-pointer font-semibold rounded-lg bg-red-500"> {isConnected ? `Connected: ${address}` : `Not Connected`} </div> <div> <button className="p-4 m-4 cursor-pointer font-semibold rounded-lg bg-blue-500" onClick={() => { console.log("Counter:", counter); }} > Get Counter: {isLoadingCounter ? "Loading..." : counter !== undefined ? counter.toString() : "Error"} </button> </div> <div> <button className="p-4 m-4 cursor-pointer font-semibold rounded-lg bg-purple-500" onClick={() => { console.log("Number:", num); }} > Get Number: {isLoadingNumber ? "Loading..." : num !== undefined ? num.toString() : "Error"} </button> </div> <div> <button className="p-4 m-4 cursor-pointer font-semibold rounded-lg bg-green-500" onClick={handleIncrement} > Increment </button> </div> </> ); } // SPDX-License-Identifier: MIT pragma solidity ^0.8.13; contract Dapp { uint256 public number; function increment() public { number++; } function getDoubledNumber() public view returns (uint256) { return number * 2; } } // smart contract code The issue:
When calling the getDoubledNumber() or number() functions from the smart contract via wagmi, the values are returned as undefined. Expected result: Display the values retrieved from the contract. Actual result: The values show up as undefined on the frontend. What I've tried:
Using useReadContract without refetch. Checking the contract: Verified it works fine using Remix. Reviewing console messages: Printed out messages but didn’t find any clear errors. Console Output
Increment successful page.tsx:58 Counter: undefined page.tsx:87 Number: undefined page.tsx:97 page.tsx:67 Counter fetched: undefined page.tsx:70 Number fetched: undefined page.tsx:67 Counter fetched: undefined page.tsx:70 Number fetched: undefined Questions:
Why are the values showing up as undefined? Is there something missing in the wagmi configuration for Next.js? Do I need to use refetch with useReadContract to ensure I get the updated values? 