Best Practices for Synchronizing Atoms with Remote Storage

[mrsekut]

I have been exploring methods to synchronize atoms with external storage and have found the official atomWithStorage API very useful. This API is mainly intended for use with LocalStorage or Cookies, as the key provided in the first argument is static. Here is an example of how I envision it working:

const storageInRemote: AsyncStorage<Event[]> = {
  getItem: async id => {
    return await getEventsById(id);
  },
  setItem: async (_id, events) => {
    const newEvent = tail(events);
    await addEventById(id, newEvent);
  },
  removeItem: async () => {},
};

const _storeAsyncAtom = atomWithStorage<Event[]>(
  get => get(idAtom),  // It would be great if this could be specified dynamically
  [],
  storageInRemote,
  { getOnInit: true }
);

In this case, the key is dynamically generated based on the idAtom value, allowing seamless integration with both LocalStorage and remote storage. Users interacting with _storeAsyncAtom would only need to be concerned with references and updates, without needing to know if the storage is local or remote. This approach would also make it easier to switch out storage methods during testing.

Given the current capabilities of Jotai, I am curious about the best way to implement similar functionality. My goal is to have read and write capabilities while dynamically generating keys based on atom values. Here's my current approach, which assumes an event sourcing model where events are stored in a database:

const _eventsAtom = unwrap(
  atom(async get => {
    const id = get(idAtom);
    return await getEventsById(id);
  }),
  e => e ?? [],
);

export const statusAtom = atom(get => {
  const id = get(idAtom);
  const events = get(_eventsAtom);
  return reduce(id)(events);
});

export const saveAtom = atom(
  null,
  async (get, set, event: Event) => {
    const id = get(idAtom);
    await addEventById(id, event);
  },
);

The main issue with this implementation is that _eventsAtom does not get updated upon saving a new event. As a workaround, I added a lastUpdatedAtom to force an update:

const _eventsAtom = unwrap(
  atom(async get => {
    get(lastUpdatedAtom);
    const id = get(idAtom);
    return await getEventsById(id);
  }),
  e => e ?? [],
);

const lastUpdatedAtom = atom(new Date().getTime());

export const saveAtom = atom(
  null,
  async (get, set, event: Event) => {
    const id = get(idAtom);
    await addEventById(id, event);
    set(lastUpdatedAtom, new Date().getTime());
  },
);

While this solution works, I believe there might be a more optimal way to achieve this. I would greatly appreciate any guidance or suggestions on how to better implement dynamic key generation for remote storage synchronization in Jotai.

Thank you!

[dai-shi]

It looks good to me. I'd use a counter instead of time.

Also, check this out for another pattern: https://blog.axlight.com/posts/how-to-use-jotai-and-use-transition-for-mutation/

[mrsekut]

Thanks !!
Using a counter instead of time indeed seems simpler. I've updated the code as follows:

const _eventsAtom = unwrap(
  atom(async get => {
    get(updatedCounterAtom);
    const id = get(idAtom);
    return await getEventsById(id);
  }),
  e => e ?? [],
);

export const saveAtom = atom(
  null,
  async (get, set, event: Event) => {
    const id = get(idAtom);
    await addEventById(id, event);
    set(updatedCounterAtom, c => c + 1);
  },
);

const updatedCounterAtom = atom(0);

I also checked out the URL you shared. It looks very helpful and I'll use it as a reference. Thank you!