[bug] useContractRead not returning key/value pairs after second page refresh

[zawilliams]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.3.5

Current Behavior

Hey all,

I was using useContractWrite to write something to my local Hardhat, and then refreshed the page which triggers useContractRead and noticed that first refresh I get the following (note the key/value pairs):

And then I refresh the page again, and I get this (no key/value pairs) in the console:

Is there something obvious I'm missing as to why the key/value pairs disappear after a couple refreshes when I'm returning an array of structs? Or is this a bug?

Also not sure if this is an ethers issue or if it's a wagmi issue.

Expected Behavior

The expected behavior is for it to return the struct with key/value pairs like so:

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[zawilliams]

Adding a link to the repo and the demo app.

Demo app: https://screech.vercel.app/

Repo with line of code in question: https://github.com/zawilliams/screech/blob/main/hooks/useScreech.js#L20

If you view the console on the page upon first load you should see an array logged a few times, but if you refresh the page, the key/value pairs inside the array disappear. You have to reload the page in an incognito window to see it happen again.

[tmm]

@zawilliams thanks for providing all this info! can you put together an example that is more minimal? will make it much easier to check this out.

[zawilliams]

@tmm no prob!

Here's a minimal example: https://codesandbox.io/s/ethers-vs-wagmi-d6tq9z?file=/src/App.tsx

Pull up the browser console (not the codesandbox console on the page) and once this loads, you'll see from wagmi and from ethers in the console with an array. You'll notice that on the initial load, both arrays look identical and contain key/value pairs. Refresh the page and check the console again, and you'll see the array after from wagmi no longer contains the key/value pairs but the from ethers does.

[zawilliams]

@tmm had time to dig into this more. It looks like this is related to caching and serializing. If after the second refresh, you delete the wagmi.cache key from localStorage, the missing key/value pairs will print to the console again from useContractRead, but then refresh again and after the data is persisted to localStorage, the key/value pairs get stripped.

This is where the cache is created for wagmi.cache:
https://github.com/tmm/wagmi/blob/44a884b84171c418f57701e80ef8de972948ef0b/packages/react/src/context.tsx#L41

Will have more time to dig in again later. Maybe it's an issue with the serializer?

[zawilliams]

Upon looking at the cached data in wagmi.cache in localStorage, it does look like the data getting persisted is indeed stripped of the key/value pairs.

[jxom]

Thank you for looking into this. Raised a PR for a fix #552.

[zawilliams]

@jxom glad to help! Thanks for raising the PR!

[zawilliams]

@jxom @tmm I've updated my CodeSandbox (https://codesandbox.io/s/ethers-vs-wagmi-d6tq9z?file=/src/App.tsx) to use the new release (0.4.10) after the PR was merged for this issue, but it seems it has not fixed the issue. wagmi.cache still stores the arrays without the key/value pairs and it seems a bug has been introduced.

If you pull up the console, you'll see this now:

Note the new 3rd array key/value pair (null: Array). Previously this was just 2 arrays without the missing key/value pairs that Ethers returns correctly.

Again, here's what Ethers returns, and I assume useContractRead from wagmi should return:

Should I raise a new issue or can this issue be re-opened?

[jxom]

Fixing here
#566

[zawilliams]

@jxom thanks for the fix! Working nicely now 🎉

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.