(jotai/query and async atom) how to use the package properly

[Vanish404]

Good day everyone. A long time ago we decided to write a production-ready app by using jotai(0.16.5) and jotai/query. I know that is not good, but it was MVP and we wanted to write a source code quickly. We found a significant bug that refetch data when we don't need it, and now I wanted to migrate to the new version of the jotai (1.3.0 now), but I faced several problems that I don't know how to resolve properly. I created a repository that reproduces these problems.

1. a) go to the users page;
   b) press the edit button (for ex. Dan)
   c) go back
   d) press edit button (for ex. Maksim)

Actual result:

• the app is fetching the previous user and after that a new one
  Expected result:
• that app is fetching a new user

I found possible solution, wdyt?

2. how to wait for a result of the previous atom? For example, I created a User and want to create a Post for them.
   https://github.com/Vanish404/jotai-example/blob/main/frontend/my-app/src/components/users/createUser.jsx#L31
   In the current version (0.16.5) atom returns a promise and we can wait, but now we cannot do it (1.3.0)

Thank you so much for building this fantastic package!

[dai-shi]

@aulneau Can you help on this?

---

a side note:

In the current version (0.16.5) atom returns a promise and we can wait, but now we cannot do it (1.3.0)

Yeah, we changed that behavior before v1 because it was very hacky and thought it's not a right abstraction.
We still have to figure something out around this: #607
Anyway, you/we need to find a solution with the v1 behavior.

[Vanish404]

Anyway, you/we need to find a solution with the v1 behavior.

that I'm trying to do. how do you usually wait the result of async write atom to do something in the future?

[dai-shi]

For your use case with RQ, I suppose your solution is good.

In general, if you want to know when async write function is finished, you want to use callback.

const countAtom = atom(0)
const delayedAtom = atom(
  (get) => get(countAtom),
  async (get, set, action) => {
    await new Promise((r) => setTimeout(r, 1000))
    set(countAtom, action.value)
    action.callback()
  }
)

[Vanish404]

oh, so sad that we don't have declarative solution

[dai-shi]

We don't often use this pattern. In the jotai mental model, we do tasks here int the write function, not outside. This technique might only be required if you are interacting other non-jotai react hooks or something.

[aulneau]

Hmm interesting, I can't play with the repo at this moment, but could you try this version and see if the issue persists? This is the version from #653 which possibly affects this kind of behavior.

yarn add https://pkg.csb.dev/pmndrs/jotai/commit/d2599e20/jotai

or

npm i https://pkg.csb.dev/pmndrs/jotai/commit/d2599e20/jotai

Additionally, can you explain in more depth the result you're hoping for?

[Vanish404]

This is the version from #653 which possibly affects this kind of behavior.

sorry, but It didn't help :(

Additionally, can you explain in more depth the result you're hoping for?

For example, I have user management and I want to create a user and after that create a post for them. basically, I need to wait for a response from the API when the user will be created I will get user.id and create a post with user.id.
My workflow looks like that:
POST /users => POST /users/:create_user_id/posts
My current code looks like that:

  const handleCreate = useCallback(async () => {
    await createUser(currenUser);
    await createPost({ id: currenUser.id, post: { desc: 'somePost' } })
  }, [currenUser, createUser, createPost])

mb am I doing something wrong?