Adding an IndexedDB Storage

[lucajung]

Caching huge files which exceed the localstorage (5-10MB) are currently not cacheable.
IndexedDB might be the only solution to cache those responses in modern Web browsers.

[arthurfiorette]

Hey! This would be an awesome feature! Up to a PR?

Reference for implementation

[arthurfiorette]

My only limitation here is to only merge PRs passing CI with added unit tests, anything else should be fine :)

[lucajung]

With pleasure. I'll do it in the next couple of days.

[lucajung]

Hey! I have it up and running. But there is an issue while writing the key value pair to the database. The set method is only receiving an empty object: "{"state":"loading","previous":"empty"}"
Do you know what I am doing wrong?
@arthurfiorette

[arthurfiorette]

@lucajung Without seeing the code I cannot help with. Open a draft PR please.

[CatchABus]

Actually, it's already possible with https://www.npmjs.com/package/idb-keyval which I happen to use for a long time.
Here's my sample:

import axios from "axios";
import { buildStorage, setupCache } from "axios-cache-interceptor";
import { clear, del, get, set } from "idb-keyval";

setupCache(axios, {
  storage: buildStorage({
    async find(key) {
      let value;
      try {
        value = await get(key);
        if (value != null) {
          value = JSON.parse(value);
        }
      } catch (err) {
        log.warn(err);
      }
      return value;
    },
    async set(key, value) {
      try {
        await set(key, JSON.stringify(value));
      } catch (err) {
        log.warn(err);
      }
    },
    async remove(key) {
      try {
        await del(key);
      } catch (err) {
        log.warn(err);
      }
    }
  })
});

[arthurfiorette]

https://axios-cache-interceptor.js.org/guide/storages#indexeddb