Nextjs - Working with multiple hooks and delay in browser recognition

[connorphill]

Goal

• Allow the Signer hook to load before contract hooks and prevent server-side rendering from NextJS to throw errors in process

Context

I am trying to understand how to make wagmi work better with NextJS given Next is built to do server-side rendering and Wagmi/Web3 relies on client-side loading of wallets and interactions with scripts. I followed the solution provided in previous Q&A bugs which is to use a component state and useEffect that loads only if the state is true, but I can't figure out how to handle hooks like useContractRead or useContractWrite that depend on other hooks loading information like the signer object from useSigner that would allow contract interactions after the components mount. I receive Error: provider is required to use ENS name as contract address (operation="new Contract", code=UNSUPPORTED_OPERATION, version=contracts/5.6.0) when I use useContractRead because the signer object doesn't update before the hook is called. I tried wrapping a conditional for the signer object around the read hook, but receive a runtime error (Error: Should have a queue. This is likely a bug in React. Please file an issue.).

Code

import { useEffect } from 'react'
;import { useProvider, useContractRead, useSigner, useAccount } from 'wagmi'
import ERC721NFT_IPFS from "../../src/artifacts/contracts/ERC721/ERC721NFT_IPFS.sol/ERC721NFT_IPFS.json";
const util = require('util')
const contractAddress = process.env.ERC721NFT_IPFS_RINKEBY_ADDRESS || "";

const ERC721Form = () => {
    // Puts Contract in Read-Only
    const provider = useProvider();
    const account = useAccount();

    // Signer
    const { data: signer, isError: signerError, isLoading: signerLoading } = useSigner({
        onSettled(data, error) {
            console.log('Settled', data, error)
        },
        onError(error) {
            console.log('Error', error)
        },
        onSuccess(data) {
            console.log('Success', data)
        },
    })
    console.log("Signer")
    console.log(signer);

    
    if (signer && signer != undefined){
        // Read Contract
        const { data, isError, isLoading } = useContractRead({
            addressOrName: contractAddress,
            contractInterface: ERC721NFT_IPFS.abi,
            signerOrProvider: signer
        },
        'getAllTokens',
        )
        console.log(isError)
    }

    useEffect(() => {
        if (document && document !== null && useAccount) {
            console.log("useEffect");
        }
    }, [useSigner, useContractRead]);

}

Console:

Signer
JsonRpcSigner {_isSigner: true, provider: Web3Provider, _address: '0x1Be345b540dA80821dB76E0E6F84B1a60Ac3bC21', _index: null}
Uncaught Error: Should have a queue. This is likely a bug in React. Please file an issue.

[tmm]

useContractRead should only be called at the top level. If you want to call it conditionally, you can use the enabled option.

[connorphill]

Thanks for pointing out my initial mistake of wrapping useContractRead in a conditional and breaking the top-level rule. when I set the enabled option, I am able to run once the Signer is set, but I'm thrown an error at the useContractRead hook:
Error:

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'f'
    |     property '_readableState' -> object with constructor 'y'
    |     property 'pipes' -> object with constructor 'i'
    |     property '_readableState' -> object with constructor 'y'
    --- property 'pipes' closes the circle

Additional logs:

at JSON.stringify (<anonymous>)
    at hashQueryKey (utils.mjs?8ab5:161:1)
    at hashQueryKeyByOptions (utils.mjs?8ab5:153:1)
    at QueryClient.defaultQueryOptions (queryClient.mjs?13c1:308:57)
    at useQuery (wagmi.esm.js?20d3:303:1)
    at useContractRead (wagmi.esm.js?20d3:1228:1)

An alternative approach I took was to try using useContract which can run without issues with the same signer and contract interface so I can't seem to understand what might be different about the useContractRead

[tmm]

signerOrProvider was removed from useContractRead in a more recent version. It uses the client's provider instead of being configurable.

[connorphill]

Ahh that was the change I needed. Thank you for the help! Makes a lot more sense now.