How would I use a remote persistant storage?

[benjick]

Hello!

I wanna use persist to sync data remotely so I can continue working on another device. How would I solve this?

I created this example storage:

import { StateStorage } from "zustand/middleware";

const url = "https://example.com/api/state/";

export const remoteStorage: StateStorage = {
  getItem: async (name) => {
    const res = await fetch(url + userId);
    const json = await res.json();
    return json;
  },
  setItem: async (name, value) => {
    await fetch(url + userId, {
      method: "POST",
      body: JSON.stringify({ value }),
    });
  },
  removeItem: async (name) => {
    await fetch(url + userId, {
      method: "DELETE",
    });
  },
};

but I'm not sure how I would get userId into the actual storage. Any suggestions?

[dai-shi]

Interesting use case. Not sure if it's fully supported. What I can think of is encoding userId in name.
Cc: @AnatoleLucet

[benjick]

I thought about that as well, but I'm not sure how I would change name during runtime

[dai-shi]

setOptions could do. But, it's not designed for this use case as you might guess.

zustand/src/middleware/persist.ts

Lines 311 to 315 in 1dce3d2

	setOptions: (newOptions) => {
	options = {
	...options,
	...newOptions,
	}

[AnatoleLucet]

Not 100% sure, but since your storage is async, you should be able to use myStore.getState().userId inside your storage methods Nop, definitely not possible

[benjick]

That makes sense, I will try it out!

[benjick]

It works fine for setItem but for getItem I sadly get the following error:

TypeError: state__WEBPACK_IMPORTED_MODULE_2_.useStore is undefined

[benjick]

Okay I saw your update now. Too bad! Thanks for taking the time

[benjick]

So what I ended up doing for now is basically just const userId = localStorage.getItem('userId');