On first load, it seems to load the wrong token

[Stono]

Firstly, I apologise if this is a super stupid question - I'm new to both react (in this case remix) and wagmi :) So i'm learning!

I have a simple component mostly taken from the wagmi documentation/examples.

export default function Dashboard() {
  let loaderData = useLoaderData()

  const addressOrName = loaderData.session.data.address
  const [{ data, error, loading }, getBalance] = useBalance({
    addressOrName
  })

  if (loading) return <div>Fetching balance…</div>
  if (error) return <div>Error fetching balance</div>

  const update = async () => {
    console.log('updating')
    await getBalance()
  }

  return (
    <div>
      <main>
        <h2>{loaderData.description}</h2>
        You have {data?.formatted} {data?.symbol}
        <Button onClick={update}>Update balance</Button>
      </main>
    </div>
  )
}

loaderData.session.data.address = an address on the matic mumbai polygon testnet. I have my provider setup correctly for alchemy on the matic testnet.

On the first load of the page (eg if i hit F5), it seems to load ETH:

You have 0.0 ETH

However if I click the button "Update Balance", it correctly updates to my MATIC balance:

You have 1.498757434997017844 MATIC

It's super weird because i can see the requests in alchemy, and they look identical:

I really can't sus out why this is the case 🤷 so any help would be appreciated. It's likely my coding, rather than a bug!

[Stono]

Ah so if i debug a little more i can see the page load request goes to mainnet, but my second one goes to mumbai as expected? :|

So if i hard code the chainId in my provider:

export const provider = ({ chainId }: { chainId?: number | undefined }) =>
  new providers.AlchemyProvider(80001, 'key')

It works on page refresh too. So it's something to do with how this chainId is getting populated :|

For reference my entry.server.tsx looks like this:

  const markup = renderToString(
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <EthHooksProvider autoConnect connectors={connectors} provider={provider}>
        <RemixServer context={remixContext} url={request.url} />
      </EthHooksProvider>
    </ThemeProvider>
  )

and my entry.client.tsx looks like this:

hydrate(
 <ThemeProvider theme={theme}>
   <CssBaseline />
   <EthHooksProvider autoConnect connectors={connectors} provider={provider}>
     <RemixBrowser />
   </EthHooksProvider>
 </ThemeProvider>,
 document
)

[Stono]

OK so this seems to work:

  const [{ data: connectData }] = useConnect()
  useEffect(async () => {
    await getBalance()
  }, [connectData.connected])

Which kind of makes sense, following a page refresh i should only get the balance after connected. Is this the correct pattern?

[tmm]

Could also do something more declarative like this:

const addressOrName = loaderData.session.data.address
const [{ data, error, loading }] = useBalance({
  addressOrName,
  skip: !addressOrName
})

Once addressOrName is defined, the balance will be fetched.

[Stono]

Ahh i wasn't aware of the skip. The issue for me isn't that addressOrName is undefined, it's that the provider isn't connected (eg autoConnect hasnt completed).

So this does the job:

  const [{ data, error, loading }, getBalance] = useBalance({
    addressOrName,
    watch: false,
    skip: !connectData.connected
  })

Thank you for your reply :)