[V4] Using a custom `path` in `createMMKV` fails to save data

[ChristopherGabba]

Good morning Marc!

I was experimenting with parameters and noticed something ... interesting?

Previously I had:

export const mmkvStorage = createMMKV()

// Tanstack persist logic
export const clientPersister = {
  persistClient: (persistedClient: PersistedClient) => {
    const data = JSON.stringify(persistedClient)
    mmkvStorage.set(storageKey.reactQueryCache, data)
  },
  restoreClient: () => {
    const data = mmkvStorage.getString(storageKey.reactQueryCache)
    if (!data) {
      return undefined
    }
    return JSON.parse(data) as PersistedClient
  },
  removeClient: () => {
    mmkvStorage.remove(storageKey.reactQueryCache)
  },
} as Persister


// How I was using it in main App.tsx
  return (
    <PersistQueryClientProvider
      persistOptions={{ persister: clientPersister, maxAge: QUERY_STALE_TIMES.SEVEN_DAYS }}
      client={queryClient}
    >
      <App />
    </PersistQueryClientProvider>
  )

And it works fantastic -- super fast, rehydrates every time, queries maintain their stale / gc times and cached data, etc -- TLDR absolutely no issues.

I was reading the docs and just thought, interesting you can put storage ids and stuff in place, so I just changed this:

export const mmkvStorage = createMMKV({
  id: `app-data-storage`,
  path: `app/data`,
})

This was literally the only change I made and it was almost straight from the docs:

Every time I opened the app, completely gone -- no hydrated data, all persistence failed. I would go as far to say that nothing was even writing correctly to begin with. I would have thought that just because there is an id and a path, it would sort of just organize it under a key-value folder in a different way.

Obviously nothing urgent, I just went back to my previous, but something seems broken here.

[maintenance-hans[bot]]

Guten Tag, Hans here.

[!NOTE] New features, bugfixes, updates and other improvements are all handled mostly by @mrousavy in his free time. To support @mrousavy, please consider 💖 sponsoring him on GitHub 💖. Sponsored issues will be prioritized.

[mrousavy]

Does it work with just id? As in, which part makes it fail - id or path or both?

[ChristopherGabba]

Hey @mrousavy, just tested it and it works with just id, but as soon as I add a path like "app/data" it fails.

Note that typescript does error when path is provided without the id prop, which may be by design.

I also tested the path prop as one word, no "/" and it still fails.

Seems like path is the problem.

[mrousavy]

Well did you create the folder before passing it to path?

[ChristopherGabba]

I did not, no. I call this at the entry point of the app almost, outside any component, before I can even use a FileSystem call I would have thought.

That's probably the issue, I guess I assumed that the createMMKV would do that for me, which is probably a bad assumption.

Maybe just an error should be on thrown on JS that says "createMMKV function has failed: folder provided to path does not exist!", right now its kind of a silent failure.

The tooltip/JSDoc mouseover example in VSCode seems to imply that you can just write a string directly in there (it also doesn't show id, which appears to be a required prop if you are using the path via TS):

Note I did try the tooltip directly with "/tmp/" and it also fails.