About working with ethers

[nwleedev]

I am on my own Web3 project. I decided to use swr to cache responses to prevent unnecessary reloads.

The problem is contract methods are called too much even though I put same parameters as key in useSWR.

Example code is here.

import {useAccount} from "./use-account-local-module"
import useSWR from "swr"
import { useMemo } from "react"
import createContract from "./some-local-module-file"

const useBalance = () => {
  const provider = useProvider()
  const userAddr = useAccount()
  const contract = useMemo(() => {
    if (provider === null || provider === undefined) {
      return
    }
    if (userAddr === null || userAddr === undefined) {
      return
    }
    return createContract(provider, userAddr)
  }, [provider, address])
  const fetchKey = contract && userAddr ? [contract, userAddr] as const : undefined

  const {data: balance, mutate: fetchBalance} = useSWR(fetchKey, ([contract, address]) => {
    console.log("contract method are called now")
    return contract.getBalance(provider, address)
  })

  return [balance, fetchBalance] as const
}

The function createContract returns a ethers contract from one provider and one user wallet address. By calling getBalance, I could get a BigNumber balue.

When I call this hook with several components, the message contract method are called now is printed depending on the number of components.

const App = () => {
  const [balance] = useBalance()
  const [balance2] = useBalance()
  const [balance3] = useBalance()
  
  return <div></div>
}
// print "contract method are called now" 3 times..

As I know, swr is able to save data to reuse. But it seems caching are not working with any reasons.

The last thing I found is the objects contract or provider can not be serialized by JSON.stringify. Is that related with this issue? I think swr can not find cached data.

When corrected, How can I make swr and ethers compatible?