How to deserialize dates with createAsyncStoragePersister?

[avegatolber]

I am using Indexed DB to persist the cache. I have an issue where dayjs objects are stored in the cache, and when I reload the page, it breaks because those objects are returned as strings. I have been researching and found that createAsyncStoragePersister has serialize and deserialize properties to customize this. I also saw that using a library like superjson is recommended to achieve this.

However, I haven’t found any code examples showing how to implement it. Any ideas? I would appreciate a small code example on how to implement this in createAsyncStoragePersister.

This is my persister

import { del, get, set } from 'idb-keyval'

const persister = createAsyncStoragePersister({
    storage: {
        setItem: async (key, value) => set(key, value),
        removeItem: async (key) => del(key),
        getItem: async (key) => get(key),
    },
})

[avegatolber]

This seems to work. It is ok or is there a simpler way?

import { del, get, set } from 'idb-keyval'
import dayjs, { Dayjs } from 'dayjs'
import superjson from 'superjson'

superjson.registerCustom<Dayjs, string>(
    {
        isApplicable: (value): value is Dayjs => dayjs.isDayjs(value),
        serialize: (value: Dayjs) => value.toISOString(),
        deserialize: (value) => dayjs(value),
    },
    'dayjs',
)

const persister = createAsyncStoragePersister({
    serialize: superjson.stringify,
    deserialize: superjson.parse,
    storage: {
        setItem: async (key, value) => set(key, value),
        removeItem: async (key) => del(key),
        getItem: async (key) => get(key),
    },
})