Async atoms in v2.0 atomsWithQuery

[felix-bohlin]

According to the migration guide the new, 2.0 way of getting derived async atoms looks like this:

const derivedAtom = atom(async (get) => (await get(asyncAtom)).toUppercase())

I'm a bit confused how to migrate from the old atomWithQuery to the new 2.0 atomsWithQuery. If I have a query atom that expects an async atom, this has worked for me in a previous version:

// v.1.8.5
export const firstAtom = atomWithQuery(() => ({
  queryKey: ["first"],
  queryFn: async () => {
    return await ( /../ ).json()
  },
}))


export const secondAtom = atomWithQuery((get) => ({
  queryKey: ["second", get(firstAtom)], // this won't work with atomsWithQuery ('no overload matches this call')
  queryFn: async ({ queryKey: [, firstThing] }) => {
    return await ( /../ ).json()
  }, 
  enabled: !!get(firstAtom) // EDIT: added for clarity
}))

What's the best/recommended way to go about that? If you need a better repro let me know.

[dai-shi]

Thanks for opening a discussion about v2 API. That's exactly the point of the pre-release.
Let's assume atomWithQuery is from jotai/query.

Before going into some ideas, the pattern using firstAtom and secondAtom seems non-ideal by nature. It causes fetch waterfalls. I wonder if it's a good practice in tanstack/react-query in general.

Improve jotai-tanstack-query

We should explore improving the integration library to try supporting async functions such as:

import { atomsWithQuery } from 'jotai-tanstack-query'

export const [secondAtom] = atomsWithQuery(async (get) => ({
  queryKey: ["second", await get(firstAtom)],
  queryFn: async ({ queryKey: [, firstThing] }) => {
    return await ( /../ ).json()
  },
}))

Use loadable

For now, what we can do is to use loadable util, and disable query while loading.

import { loadable } from 'jotai/vanilla/utils'

const loadableFirstAtom = loadable(firstAtom)

export const secondAtom = atomWithQuery((get) => {
  const loadableFirst = get(loadableFirstAtom)
  if (loadableFirst.state !== 'hasValue') {
    return {
      queryKey: ["second", "dummy"],
      // enabled: false, // maybe disable the query?
      queryFn: async () => ...,
    }
  }
  return {
    queryKey: ["second", loadableFirst.value],
    queryFn: async ({ queryKey: [, firstThing] }) => {
      return await ( /../ ).json()
    },
  }
}))

Explore unstable_unwrapAtom

We are not sure how this new util helps yet, but the idea is the following:

import { unstable_unwrapAtom } from 'jotai/vanilla/utils'

const unwrappedFirstAtom = unstable_unwrapAtom(firstAtom, "default value")

atom-in-atom pattern

Not sure if this works for your case.

https://jotai.org/docs/guides/atoms-in-atom

export const secondAtomAtom = atom(async (get) => atomWithQuery(() => ({
  queryKey: ["second", await get(firstAtom)],
  queryFn: async ({ queryKey: [, firstThing] }) => {
    return await ( /../ ).json()
  },
})))

[felix-bohlin]

Thanks for your in-depth answer!

1. I've updated my first post and added the enabled-flag to my secondAtom like this:

export const secondAtom = atomWithQuery((get) => ({
  queryKey: ["second", get(firstAtom)], // this won't work with atomsWithQuery ('no overload matches this call')
  queryFn: async ({ queryKey: [, firstThing] }) => {
    return await ( /../ ).json()
  }, 
  enabled: !!get(firstAtom) // EDIT: added for clarity
}))

I agree, it might not be ideal but at this point in time in this project, dependent queries are the best solution I have right now 😄

2. Re: Improve jotai-tanstack-query
   That was actually what I was trying to make work when I was fiddling around. It feels like a natural solution going forwards.

3. Re: loadable & unstable_wnrapAtom
   Thanks, I'll check that out and get back to you on that!

4. Re: atom-in-atom pattern
   Did you mean atomWithQuery or atomsWithQuery? I just assumed atomWithQuery is getting deprecated in v2 and that we shouldn't use it.

[dai-shi]

I just assumed atomWithQuery is getting deprecated in v2 and that we shouldn't use it

That's true. I just created the example with the old one.
jotai/query will be deprecated in v1.12.0 or so and will be completely removed in v2.

[dai-shi]

Re: Improve jotai-tanstack-query
It feels like a natural solution going forwards.

I thought so too. But, on second thought, this might make jotai-tanstack-query too complicated, and not maintainable.

For now, I hope other three methods work reasonably.
We can consider adding a new util if we found a pattern.

[mwisnicki]

I tried to update query-heavy codebase to v2 and had to give up due to amount of ugly code I would have to add to workaround this.
Restoring original behavior would be highly appreciated even if it isn't optimal and is hidden behind some unstable_ helper.

[dai-shi]

Have you seen this? If it works, we'd like to add it in the lib.
jotaijs/jotai-tanstack-query#21 (comment)

[zbyte64]

unstable_unwrapAtom will not block and will return a default value. In v1 you would have 1 query, with unwrap you will have 2: one for the default value and one for when the desired value is finally resolved.

[dai-shi]

That's how v2 API is designed, and it's not compatible with v1.

jotaijs/jotai-tanstack-query#21 (comment) would be a solution for jotai-tanstack-query

[omridevk]

@dai-shi such an awesome lib!!!
When using this workaround (loadable) it doesn't work with suspense, i.e it doesn't suspense the component, everything else work. I assume it is because of the returning of the default query.
Will share an example once I have one.