How to 'get' another atom's value in atomWithStorage storage-functions?

[PhilipGrefe]

Hi,

I'm using atomWithStorage with a custom storage implementation.
Is there any way to get another atom's value inside the custom storage functions?

const myAtom = atomWithStorage(
  'foo',
  'bar',
  {
    getItem: async (key, initialValue) => {
      // const anotherAtom = get(anotherAtom) 🤔
      return "baz"
    },
    //...
)

[dai-shi]

It depends on how often anotherAtom value changes, but one canonical way would be atom-in-atom.

Another hack is use Store API, but that technically breaks pure atom model.

[PhilipGrefe]

I've played around but did not get to a conclusion.
Also, I've made a mistake in the code above: I want to get the atom's value, not the atom itself.

This is how it should look like:

const myAtom = atomWithStorage(
  'foo',
  'bar',
  {
    getItem: async (key, initialValue) => {
      // const value = get(anotherAtom) 🤔
      // query storage using 'value'
      return "baz"
    },
    //...
)

Background: I have some data in my storage and other data in atoms (transient data, no need to store it). Now, I want to use the transient data in my query / as an input to the atomWithStorage.

[dai-shi]

I think I understand the requirement, and my communication wasn't clear.

Basically, it's unsupported, because it's not a clean atom model (not pure and declarative).
So, there's only a hack.

But, before going into the hacks, I have a question.
If anotherAtom's value changes, should myAtom's value change?

• if YES -> atom in atom
• if NO -> maybe anotherAtom shouldn't be an atom

[PhilipGrefe]

Thanks for your reply. YES - the atom should change.

I still couldn't figure it out, partially because I'm not yet familiar enough with the atom in atom concept
May I ask: Should the atomWithStorage be inside anotherAtom or - vice versa - should anotherAtom be inside the atomWithStorage?

FYI I'm using atomFamily for now like so, which is also working:

const myAtom = atomFamily(({ value }) =>
  atomWithStorage(`foo`, 'bar', {
    getItem: () => {
      // using the 'value' here works fine
    },
    //...
  }),
)

// usage in derived atom (similarly for Components)
const derivedAtom = atom((get) => {
  const value = get(myAtom({ value: 'boo' }))
  //...
})

[dai-shi]

If atomFamily works for your case, it might be easier.

atom-in-atom is the way to create an atom which internally creates atomWithStorage.

const myAtomInAtom = atom((get) => atomWithStorage(
  'foo',
  'bar',
  {
    getItem: async (key, initialValue) => {
      const value = get(anotherAtom) 🎉 
      // query storage using 'value'
      return "baz"
    },
    //...
))