feat: atomWithQueries

[ThaddeusJiang]

Implement atomWithQueries for useQueries, resolve #97

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[dai-shi]

thanks for working on it. i leave the review for @himself65.

[himself65]

sorry my changes doesnt work but I think we should have a way to make this

[ThaddeusJiang]

@himself65 Any other concerns? If there are no issues, I'm ready to complete this PR.

[himself65]

I'm concerning about the example here, seems like this atom is rely on react hook? can we change it?

[ThaddeusJiang]

@himself65 The atomWithQueries does not necessarily depend on React hooks; here it is used simply for convenient state management, same as useState.

[himself65]

I wonder if we can change to

 const userQueryAtoms = atomWithQueries({
    queries: get(userIdsAtom).map(...)
  })

[ThaddeusJiang]

Understood

[himself65]

thanks for the fix

[himself65]

same

[himself65]

again, do we have strong type hinting here?

[ThaddeusJiang]

@himself65 What of strong type hinting is required?

In the examples, I provided type-safe samples for with and without the combine version.

jotai-tanstack-query/examples/07_queries/src/App.tsx

Line 17 in f32375a

const userQueryAtoms = atomWithQueries<User>({

[himself65]

I think the ideal solution is user shouldn't annotate the result type but people can get the type hinting

const atoms = atomWithQueries({
  queries: get(userIdsAtom).map(d => ({ userId: '1' }))
})
const users = useAtomValue(atoms)
users[0].userId // <-- without type error

[ThaddeusJiang]

@himself65 Understood.

Since atomWithQueries returns a compound type of Promise, it is necessary to handle pending and error states when writing code.

const atoms = atomWithQueries({
  queries: get(userIdsAtom).map(d => ({ userId: '1' }))
})

const userQueries = useAtomValue(atoms)

if (users[0].isPending) return <>Loading<>
if (users[0].isError) return <>Error<>

users[0].userId // <-- without type error

We provide a similar type system.

+ const atoms = atomWithQueries<User>({
const atoms = atomWithQueries({

jotai-tanstack-query/examples/07_queries/src/App.tsx

Line 17 in f32375a

const userQueryAtoms = atomWithQueries<User>({

jotai-tanstack-query/examples/07_queries/src/App.tsx

Line 102 in f32375a

queryAtom: Atom<AtomWithQueryResult<User>>

jotai-tanstack-query/examples/07_queries/src/App.tsx

Line 112 in f32375a

const UserDisplay = ({ user }: { user: User }) => {

[ThaddeusJiang]

BTW
Since the project isn't using strong typing yet, I'd suggest making a separate PR just for that.

[himself65]

ok, I think we can merge this first.

[himself65]

feel free to merge when you re ready

[kvnxiao]

Could we make a new stable release to include this addition? I'd like to take advantage of this ASAP without having to pin to a preview

[himself65]

Could we make a new stable release to include this addition? I'd like to take advantage of this ASAP without having to pin to a preview

@ThaddeusJiang can you make that, I think I don't have npm access right now. Or you can add NPM_TOKEN in secret and I will try to release though CI

[ThaddeusJiang]

@kvnxiao
Done.
Hope you have fun. ❤️

cc @himself65

[kvnxiao]

Thanks everyone!