Error handling for storage full error

[anant-nft]

We are using persistQueryClient with createAsyncStoragePersistor. Now, I need to handle storage full error. I am thinking of clearing the cache whenever we get storage full error but I am not sure where can I catch that error ?
(React Query + React Native + AsyncStorage)

[TkDodo]

the webStoragePerister catches errors internally and tries to remove old cache entries until peristence works, but it's not very efficient (see: #3034). In that issue, I also pointed out that we don't have this for the Async Storage Perister at the moment, but you can implement your own persister (just needs to implement 3 functions really).

I'm open for api proposals to implement multiple, different overflow strategies, but it would need to happen fast, as we're very close to release v4. I would ideally want to have webStoragePerister and asyncStoragePersister to have roughly the same api with the same default behaviour (which they currently do not have!)

---

what you can also do is pass dehydrateOptions to the persistQueryClient and customize it to only store certain queries instead of the whole cache, so you can e.g. exclude ones that you don't need, or ones that are huge in size.

[anant-nft]

@TkDodo Thanks for quick reply. As per your suggestion, I added error handling to the AsyncStoragePersistor.

export const createCustomAsyncStoragePersistor = ({
  storage = AsyncStorage,
  key = `REACT_QUERY_OFFLINE_CACHE`,
  throttleTime = 1000,
  serialize = JSON.stringify,
  deserialize = JSON.parse,
}: CreateAsyncStoragePersistorOptions): Persistor => {
  return {
    persistClient: asyncThrottle(
      (persistedClient: PersistedClient) =>
        persistClientWithErrorHandling(storage, key, persistedClient),
      { interval: throttleTime }
    ),
    restoreClient: async () => {
      try {
        const cacheString = await storage.getItem(key)
        if (!cacheString) {
          return
        }

        return deserialize(cacheString)
      } catch (error) {
        console.error('Error getting cache ', error)
      }
    },
    removeClient: async () => {
      try {
        await storage.removeItem(key)
      } catch (error) {
        console.error('Error removing cache', error)
      }
    },
  }
}

async function persistClientWithErrorHandling(
  storage: AsyncStorage,
  key: string,
  persistedClient: PersistedClient
) {
  try {
    await storage.setItem(key, JSON.stringify(persistedClient))
  } catch (error) {
    console.error('Error saving cache ', error)
    queryClient.clear()
  }
}

[TkDodo]

you can certainly use that in your codebase as a custom persister, but it is not something I would merge as a general behaviour. nuking the whole cache is likely not what someone would expect from a plugin, as this also affects everything on screen.

[anant-nft]

I agree. I'll test it out for my use case. Else, I'll implement the same overflowStrategy as webStoragePersistor.