splitAtom does not work with async atoms

[dlindahl]

I'm upgrading my application to the new v2 API and ran into an issue where I'm using splitAtom with an async atom. This worked previously but now returns the error arr.forEach is not a function because the atom returns a Promise rather than an array of resolved values. This is important in my application because accessing the async atom or the splitAtom currently results in a suspended state until the async item resolves.

Is this an intentional design decision or was splitAtom forgotten about during the change in read behavior? If its an intentional design decision, is there a preferred method of integrating splitAtom with async atoms? I'd also recommend a note in the docs or the migration guide about any issue here.

Thanks!

Reproduction:
https://codesandbox.io/s/react-typescript-forked-zoyqkd?file=/src/App.tsx

[dai-shi]

Thanks for reporting. I think I forgot... Didn't notice as missing tests. It should probably fixable. It would require a big refactor. Let me try.

[dai-shi]

Hm, that is way too complicated.
Also noticed that the example doesn't fully work in v1 anyway: https://codesandbox.io/s/react-typescript-forked-chx282?file=/src/App.tsx
So, it's a half regression in behavior, but it's by design, technically since v1.

[dai-shi]

Here's one solution in v2.
https://codesandbox.io/s/react-typescript-forked-y94yfw
It's using an unstable util. We could use loadable too.
I'll document it later.

Another solution is atoms-in-atom. We are still experimenting but seems promising.
Related discussion: jotaijs/jotai-tanstack-query#21 & #1615

[dai-shi]

#1755

[dlindahl]

This is essentially what I wound up doing and its good to see this mentioned in the docs. Thanks!

[karthikbadam]

Here's one solution in v2.
https://codesandbox.io/s/react-typescript-forked-y94yfw

I am seeing an error when I edit or remove a todo item in this solution.

Error
not writable atom
...
> 34 |     setTodo((oldValue) => ({ ...oldValue, task: e.target.value }));

Is there a workaround for it?

[dai-shi]

Right, but it wasn't possible with v1 either: https://codesandbox.io/s/react-typescript-forked-jdw4og?file=/src/App.tsx

Would you like to edit the example to make it similar to your use case?

[karthikbadam]

Thanks! I see. I started using jotai with v2, so I was not sure.

I have a similar use case as the todo example:

• an async atom containing a collection of "items" fetched from an API
• a component that renders each "item" and supports remove/modify/add operations

I was considering using splitAtom.
I think I can use action atoms instead to update the base atom. Are there any alternative ways?

[dai-shi]

I started using jotai with v2, so I was not sure.

Ooops, my misunderstanding. splitAtom must receive a "writable" atom to return each atom writable/modifiable. You can't simply modify read-only atom, right?
If you fetch items from an API, it will be read-only atom.
atomWithDefault is probably something to help for your case.

[karthikbadam]

That makes sense. Thanks!
Switching to atomWithDefault works in the todo example.
https://codesandbox.io/s/react-typescript-forked-pwc2t1?file=/src/App.tsx

I will try it out in my use case too.