wagmi best practice to read from a contract in loop

[BramMathijssen]

Does wagmi offer any kind of options to call a contract function with variable args in a loop? I want to call a mapping from my smart contract which I want to iterate over by key, but I can't find any solution offered by wagmi to do this.

I've written this custom hook which does work, but it isn't ideal since React gives me a linter warning: React Hook "useContractRead" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render.

What are the best practices for calling a function / reading a contract in a loop using wagmi? My current code looks as follows

export const useContractReadLoop = (membersList, contract, abi, functionName) => {
    const [list, setList] = useState([]);

    for (let i = 0; i < membersList.length; i++) {
        const { data: member } = useContractRead({
            address: contract,
            abi: abi,
            functionName: functionName,
            args: [membersList[i]],

            onSuccess(data) {
                console.log(data);
                setList(prev => [...prev, data]);
            },
        });
    }

    return list;
}

[pedrohba1]

Maybe you should use useContractReads instead. You cound just create the array first and pass it in a useContractReads function, like this:

export const useContractReadLoop = (
  membersList,
  contract,
  abi,
  functionName
) => {
  const [list, setList] = useState([]);


  const { data, isError, isLoading } = useContractReads({
    contracts:list.map((item) =>({
        address: contract,
        abi: abi,
      ...item,
    }))
  })

  return data;
};

source: https://wagmi.sh/react/hooks/useContractReads

[Anonymous961]

Now with wagmi v2

• useContractRead is now useReadContract
• useContractReads is now useReadContracts

This solution is working for me. Do checkout this example.

"use client";
import { useReadContract, useReadContracts } from "wagmi";
import SimpleVotingAbi from "@/abis/SimpleVoting.json";
import { BallotType, ConfigType } from "./CreateBallot";
import { useState } from "react";
import configData from "@/config.json";
import { getChainId } from "@wagmi/core";
import { config } from "@/config";
import { Abi } from "viem";

const Config: ConfigType = configData as ConfigType;

export function ReadContract() {
  const [Ballots, setBallots] = useState<BallotType[]>([]);
  const [isLoadingBallots, setIsLoadingBallots] = useState(true);
  const chainId = getChainId(config);
  const contractAddress = Config[chainId]?.simpleVoting
    .address as `0x${string}`;
  console.log("contractAddress ;", contractAddress);
  const { data: numberOfBallots, isLoading: numberOfBallotsLoading } =
    useReadContract({
      abi: SimpleVotingAbi,
      address: contractAddress,
      functionName: "getNumberofBallots",
    });

  const contractCalls = Array.from({ length: Number(numberOfBallots) }).map(
    (_, index) => ({
      abi: SimpleVotingAbi as Abi,
      address: contractAddress,
      functionName: "getBallotByIndex",
      args: [index],
    })
  );

  const { data: ballots, isLoading: ballotsLoading } = useReadContracts({
    contracts: contractCalls,
  });

  if (numberOfBallotsLoading) {
    return <div>Loading..</div>;
  }

  return <div>Ballots : {numberOfBallots?.toString()}</div>;
}

[matheusschreiber]

You can use the version that is not a hook

import { readContract } from '@wagmi/core'
import { abi } from './abi'
import { config } from './config'

const result = await readContract(config, {
  abi,
  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
  functionName: 'totalSupply',
})

https://wagmi.sh/core/api/actions/readContract