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),
    },
})

[LordofMaps]

The docs, under Building a Persister have a suggestion on how to use IDB without createAsyncStoragePersister.
Based on the provided example, I created a persister to store a value in IDB without serialization:

import { type PersistedClient, type Persister } from '@tanstack/react-query-persist-client';
import { get, set, del, createStore, type UseStore } from 'idb-keyval';

const storeName = 'your-store';
const store = createStore('your-db', storeName);

function createIDBPersister(idbValidKey: IDBValidKey, idbStore: UseStore) {
    return {
        persistClient: async (client: PersistedClient) => {
            await set(idbValidKey, client, idbStore);
        },
        restoreClient: async () => {
            return await get<PersistedClient>(idbValidKey, idbStore);
        },
        removeClient: async () => {
            await del(idbValidKey, idbStore);
        },
    } satisfies Persister;
}

export const persister = createIDBPersister(storeName, store);