Make value of atomFamily an object, but pass in serializable key as param

I’m doing something like this:

export const userListState = selector({
  key: 'userStateList',
  get: async () => {
    const resp = await fetch('/api/users')
    const users = await resp.json()

    users.forEach((user) => userState(user)

    return users.map(({ key }) => key))
  },
})

export const userState = atomFamily({
  key: 'userState',
  default: user => user
})

Ideally, within my app, I’d like to iterate through userListState, and and map an array of <User userKey={key} /> components

const User = ({ userKey }) => {
  const user = useRecoilValue(userState(userKey))
  ...
}

But given the way I instantiate each userState atom, I can’t pass the key in, I need to pass the entire object. So in a perfect world, the API for the default function would look like this:

const userState = atomFamily({
  'userState',
  default: (key, user) => user
})

I can get deeper into the need for this design, with each user having its own atom, as opposed to an atom consisting of a single array containing all users, but hopefully it’s not needed right now.

Does the API support something like this, or is there some kind of pattern I can apply? Loving recoil, but I’m hitting a wall with this!!

[Shmew]

I’m not a JS developer, but something like:

export const userListState = selector({
    key: 'userStateList',
    get: async () => {
        const resp = await fetch('/api/users')
        const users = await resp.json()

        const userEntries = users.map((user, i) => [i, user])
        return new Map(userEntries);
    },
})

export const getUserListState = selectorFamily({
    key: 'getUserListState',

    get: id => ({ get }) => {
        return get(userListState).get(id)
    }
})

export const userState = atomFamily({
  key: 'userState',
  default: id => getUserListState(id)
})

[Shmew]

Correct, the “key” for userInfoState is the UserInfo that is returned by the query.

One potential problem with this is it can cause a memory leak if the atoms are persisted until #56 lands, or if your query is a selectorFamily (and called frequently) rather than a selector.

I should also mention that once #314 lands doing this kind of thing will be much less complex, as you can simply create an atom that has that selector as the default value and wrap it with a selectorFamily and modify it as you wish.