How to use async atom in atomsWithQuery jotai v2?

[devnomic]

Now it returns typing error

const idAtom = atom(async (get) => {
  await new Promise((resolve) => setTimeout(resolve, 100));
  return 1;
});

// Typing error here because of using async
// I need async to await get id from atom id
const [userAtom] = atomsWithQuery(async (get) => {
  const id = await get(idAtom);
  return {
    queryKey: ["getUser", id],
    queryFn: async () => await fetch("https://reqres.in/api/users/" + id)
  };
});

Reproduction link:
https://codesandbox.io/s/nifty-kirch-sg309h?file=/src/App.tsx

Thank you

[dai-shi]

Good question. It's not entirely solved yet.
Related discussion: pmndrs/jotai#1615
Let me know which solution (more or less workaround) you like.

[devnomic]

Thank you for fast reply!
Improve jotai-tanstack-query seems the way jotai users naturally expect when migrate.
I was about to migrate my code to jotai v2.

I tried using unstable_unwrap expecting it handle the await for me, but didn't work either.

const [usersAtom] = atomsWithQuery((get) => {
  const id = unstable_unwrap(idAtom);
  return {
    queryKey: ["getUsers", id],
    queryFn: async () => await fetch("https://reqres.in/api/users/" + id)
  };
});

Using loadable seems too verbose.

I will try atoms in atom, and report. seems it will work. I'll report back later.
Hopefully can create general function wrapper such as asyncAtomsWithQuery.

[dai-shi]

Currently, my belief is improving jotai-tanstack-query is hardly possible or maintainable. (That doesn't stop someone to try and correct me.)

I hope unwrap to work. It should return undefined initially, so can you try enabled: id === undefined and see if it works around?

[devnomic]

This one works, i think it fetched twice with undefined and 1 as id

const [userAtom] = atomsWithQuery((get) => {
  const id = get(unstable_unwrap(idAtom));
  return {
    queryKey: ["getUser", id],
    queryFn: async () => {
      const res = await fetch("https://reqres.in/api/users/" + id);
      return res.json();
    }
    //enabled: id !== undefined
  };

https://codesandbox.io/s/summer-dream-gwrv7j?file=/src/App.tsx

Uncommenting the enabled makes it loading forever. So it seems unstable unwrap cannot be used.

[dai-shi]

Oh... I see. We need to use "statusAtom" instead of "dataAtom" to use enabled flag.
https://codesandbox.io/s/runtime-dream-lyg51d?file=/src/App.tsx

Hmm, this is unfortunate.

[dai-shi]

Final resort: https://codesandbox.io/s/brave-voice-ruxvdp

[devnomic]

Unfortunately this one seems need extra work to handle the null in the component.

Final resort: https://codesandbox.io/s/brave-voice-ruxvdp

I tried to wrap the atom query in atom, seems promising but not working, maybe you can have a look.
https://codesandbox.io/s/dawn-currying-0ljnqr?file=/src/App.tsx

[dai-shi]

Here you go: https://codesandbox.io/s/musing-shirley-fq0p9c

[dai-shi]

Uncommenting the enabled makes it loading forever.

We want to fix this if possible. The tricky part is TanStack Query requires to re-use observer on option change. Hmm, tbh, I'm not sure what's blocking. Can be a bug. Can be a limitation.

[devnomic]

Here you go: https://codesandbox.io/s/musing-shirley-fq0p9c

Thank you! This seems the way to go (for now), but need utils function to wrap the atomsQuery and hooks to get the value since writing double useAtomValue seems weird.

[dai-shi]

Yeah, a util function would be nice. It can probably avoid dobule useAtomValue. We can consider adding such a util in this lib.

[devnomic]

I tried to write a generic utils for this, it seems works fine, but need your help with the typing. Right now i'm using any

https://codesandbox.io/s/quirky-farrell-3f9r7j?file=/src/utils.ts

[devnomic]

Updated with typing:
https://codesandbox.io/s/broken-bash-wpco26?file=/src/utils.ts

Seems work for async and sync atom now.

Is there a way to get the value using useAtomValue instead double useAtomValue or it's not possible using atom in atom?

[dai-shi]

Ended up with rewriting. Here you go: https://codesandbox.io/s/bold-cherry-o10yl5?file=/src/utils.ts

I found a fix in jotai's type utils. Will open a PR there.

[devnomic]

Amazing, as expected from @dai-shi sensei, thank you, it seems i can try migrate my code now.