docs(examples): Simplify atom usage for atomWithQueries

Author: ThaddeusJiang

README.md

@@ -198,15 +198,15 @@ There are two ways to use `atomWithQueries`:
 #### Basic usage - Returns an array of query atoms
 
 ```jsx
-import { atom, useAtom } from 'jotai'
-import { atomWithQueries } from 'jotai-tanstack-query'
+import { Atom, atom, useAtom } from 'jotai'
+import { type AtomWithQueryResult, atomWithQueries } from 'jotai-tanstack-query'
 
 const userIdsAtom = atom([1, 2, 3])
 
-const UsersData = () => {
-  const [userIds] = useAtom(userIdsAtom)
-
-  const userQueryAtoms = atomWithQueries({
+// Independent atom - encapsulates query logic
+const userQueryAtomsAtom = atom((get) => {
+  const userIds = get(userIdsAtom)
+  return atomWithQueries({
     queries: userIds.map((id) => () => ({
       queryKey: ['user', id],
       queryFn: async ({ queryKey: [, userId] }) => {
@@ -217,42 +217,48 @@ const UsersData = () => {
       },
     })),
   })
+})
 
-  return (
-    <div>
-      {userQueryAtoms.map((queryAtom, index) => (
-        <UserData key={index} queryAtom={queryAtom} />
-      ))}
-    </div>
-  )
-}
-
-const UserData = ({ queryAtom }) => {
+// Independent UI component
+const UserData = ({ queryAtom }: { queryAtom: Atom<AtomWithQueryResult> }) => {
   const [{ data, isPending, isError }] = useAtom(queryAtom)
 
   if (isPending) return <div>Loading...</div>
   if (isError) return <div>Error</div>
+  if (!data) return null
 
   return (
     <div>
       {data.name} - {data.email}
     </div>
   )
 }
+
+// Component only needs one useAtom call
+const UsersData = () => {
+  const [userQueryAtoms] = useAtom(userQueryAtomsAtom)
+  return (
+    <div>
+      {userQueryAtoms.map((queryAtom, index) => (
+        <UserData key={index} queryAtom={queryAtom} />
+      ))}
+    </div>
+  )
+}
 ```
 
 #### Advanced usage - Combine multiple query results
 
 ```jsx
-import { atom, useAtom } from 'jotai'
+import { Atom, atom, useAtom } from 'jotai'
 import { atomWithQueries } from 'jotai-tanstack-query'
 
 const userIdsAtom = atom([1, 2, 3])
 
-const CombinedUsersData = () => {
-  const [userIds] = useAtom(userIdsAtom)
-
-  const combinedUsersDataAtom = atomWithQueries({
+// Independent atom - encapsulates combined query logic
+const combinedUsersDataAtom = atom((get) => {
+  const userIds = get(userIdsAtom)
+  return atomWithQueries({
     queries: userIds.map((id) => () => ({
       queryKey: ['user', id],
       queryFn: async ({ queryKey: [, userId] }) => {
@@ -268,8 +274,12 @@ const CombinedUsersData = () => {
       isError: results.some((result) => result.isError),
     }),
   })
+})
 
-  const [{ data, isPending, isError }] = useAtom(combinedUsersDataAtom)
+// Component only needs one useAtom call
+const CombinedUsersData = () => {
+  const [combinedUsersDataAtomValue] = useAtom(combinedUsersDataAtom)
+  const [{ data, isPending, isError }] = useAtom(combinedUsersDataAtomValue)
 
   if (isPending) return <div>Loading...</div>
   if (isError) return <div>Error</div>

examples/07_queries/src/App.tsx

@@ -10,10 +10,9 @@ interface User {
   email: string
 }
 
-const UsersData = () => {
-  const [userIds] = useAtom(userIdsAtom)
-
-  const userQueryAtoms = atomWithQueries<User>({
+const userQueryAtomsAtom = atom((get) => {
+  const userIds = get(userIdsAtom)
+  return atomWithQueries<User>({
     queries: userIds.map((id) => () => ({
       queryKey: ['user', id],
       queryFn: async ({ queryKey: [, userId] }) => {
@@ -24,6 +23,10 @@ const UsersData = () => {
       },
     })),
   })
+})
+
+const UsersData = () => {
+  const [userQueryAtoms] = useAtom(userQueryAtomsAtom)
   return (
     <div>
       <h3>Users: </h3>
@@ -36,10 +39,9 @@ const UsersData = () => {
   )
 }
 
-const CombinedUsersData = () => {
-  const [userIds] = useAtom(userIdsAtom)
-
-  const combinedUsersDataAtom = atomWithQueries<{
+const combinedUsersDataAtom = atom((get) => {
+  const userIds = get(userIdsAtom)
+  return atomWithQueries<{
     data: User[]
     isPending: boolean
     isError: boolean
@@ -61,36 +63,24 @@ const CombinedUsersData = () => {
       }
     },
   })
+})
 
-  return (
-    <div>
-      <h3>Users: (combinedQueries)</h3>
-      <div>
-        <CombinedData queryAtom={combinedUsersDataAtom} />
-      </div>
-    </div>
-  )
-}
-
-const CombinedData = ({
-  queryAtom,
-}: {
-  queryAtom: Atom<{
-    data: User[]
-    isPending: boolean
-    isError: boolean
-  }>
-}) => {
-  const [{ data, isPending, isError }] = useAtom(queryAtom)
-
-  if (isPending) return <div>Loading...</div>
-  if (isError) return <div>Error</div>
+const CombinedUsersData = () => {
+  const [combinedUsersDataAtomValue] = useAtom(combinedUsersDataAtom)
+  const [{ data, isPending, isError }] = useAtom(combinedUsersDataAtomValue)
 
   return (
     <div>
-      {data.map((user) => (
-        <UserDisplay key={user.id} user={user} />
-      ))}
+      <h3>Users: (combinedQueries)</h3>
+      {isPending && <div>Loading...</div>}
+      {isError && <div>Error</div>}
+      {!isPending && !isError && (
+        <div>
+          {data.map((user) => (
+            <UserDisplay key={user.id} user={user} />
+          ))}
+        </div>
+      )}
     </div>
   )
 }