wagmi: bug: DOMException: Failed to execute 'setItem' on 'Storage'

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.12.10

Current Behavior

Deleting entire app for just rainbowkit <WagmiConfig><Button />< /WagmiConfig> while debugging an issue I noticed this error.

react_devtools_backend.js:2655 DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'wagmi.cache' exceeded the quota.
    at Object.setItem (http://localhost:5173/node_modules/.vite/deps/chunk-KQEOP6FN.js?v=232505ef:745:19)
    at trySave (http://localhost:5173/node_modules/.vite/deps/chunk-46MMT6BX.js?v=232505ef:81:17)
    at http://localhost:5173/node_modules/.vite/deps/chunk-46MMT6BX.js?v=232505ef:90:21
    at http://localhost:5173/node_modules/.vite/deps/chunk-46MMT6BX.js?v=232505ef:129:9

This is my wagm.cache

My wagmi store

{
    "state": {
        "data": {}
    },
    "version": 2
}

Expected Behavior

Not to see that error

Steps To Reproduce

Use wagmi a lot on a single browser on many accounts?

Or just load my local storage into yours

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

See local storage above

Anything else?

I searched issues and found an unanswered discussion

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 18 (4 by maintainers)

Most upvoted comments

so if you just follow this example here: https://wagmi.sh/react/hooks/useContractReads#functionname-optional Screenshot 2023-09-15 at 12 39 52 PM

and expand this example to maybe read 10 functions (example only shows 2) as function list grows notice how each item in the array uses abi: wagmigotchiABI and its not reused, bur rather then stored in wagmi.catche so you will eventually run into this issue with = Failed to execute ‘setItem’ on ‘Storage’ depending how big is that abi that gets pushed over and over instead of have ability to reuse or avoid duplicate

vm06007 on Sep 15, 2023

I came across an issue with using the wagmi cache along with having BigNumbers in my react query state. In order to fix this issue I am considering turning off caching. @AdamK222 I believe the cache can be turned off by passing in the storage parameter to the createConfig function like so:

import { createConfig, createStorage } from 'wagmi'

export const noopStorage: BaseStorage = {
  getItem: (_key) => '',
  setItem: (_key, _value) => null,
  removeItem: (_key) => null,
}

const storage = createStorage({
  storage: noopStorage,
})

createConfig({
 storage
})

tremarkley on Aug 3, 2023