fix(query): handle error in atomWithQuery

.size-snapshot.json

@@ -1,8 +1,8 @@
 {
   "index.js": {
-    "bundled": 21126,
-    "minified": 10113,
-    "gzipped": 3334,
+    "bundled": 21254,
+    "minified": 10166,
+    "gzipped": 3349,
     "treeshaked": {
       "rollup": {
         "code": 14,
@@ -28,9 +28,9 @@
     }
   },
   "devtools.js": {
-    "bundled": 18986,
-    "minified": 9482,
-    "gzipped": 3260,
+    "bundled": 19114,
+    "minified": 9535,
+    "gzipped": 3277,
     "treeshaked": {
       "rollup": {
         "code": 28,
@@ -70,9 +70,9 @@
     }
   },
   "query.js": {
-    "bundled": 2343,
-    "minified": 1141,
-    "gzipped": 567,
+    "bundled": 2753,
+    "minified": 1235,
+    "gzipped": 608,
     "treeshaked": {
       "rollup": {
         "code": 105,

src/core/vanilla.ts

@@ -292,6 +292,9 @@ const readAtomState = <Value>(
       // a === atom
       const aState = getAtomState(state, a)
       if (aState) {
+        if (aState.e) {
+          throw aState.e // read error
+        }
         if (aState.p) {
           throw aState.p // read promise
         }

src/query/atomWithQuery.ts

@@ -34,33 +34,52 @@ export function atomWithQuery<
       const queryClient = get(getQueryClientAtom)
       const options =
         typeof createQuery === 'function' ? createQuery(get) : createQuery
-      let resolve: ((data: TData) => void) | null = null
+      let settlePromise: ((data: TData | null, err?: TError) => void) | null =
+        null
       const getInitialData = () =>
         typeof options.initialData === 'function'
           ? (options.initialData as InitialDataFunction<TQueryData>)()
           : options.initialData
       const dataAtom = atom<TData | TQueryData | Promise<TData | TQueryData>>(
         getInitialData() ||
-          new Promise<TData>((r) => {
-            resolve = r
+          new Promise<TData>((resolve, reject) => {
+            settlePromise = (data, err) => {
+              if (err) {
+                reject(err)
+              } else {
+                resolve(data as TData)
+              }
+            }
           })
       )
-      let setData: (data: TData) => void = () => {
+      let setData: (data: TData | Promise<TData>) => void = () => {
         throw new Error('atomWithQuery: setting data without mount')
       }
       let prevData: TData | null = null
-      const listener = (result: QueryObserverResult<TData, TError>) => {
-        // TODO error handling
+      const listener = (
+        result:
+          | QueryObserverResult<TData, TError>
+          | { data?: undefined; error: TError }
+      ) => {
+        if (result.error) {
+          if (settlePromise) {
+            settlePromise(null, result.error)
+            settlePromise = null
+          } else {
+            setData(Promise.reject<TData>(result.error))
+          }
+          return
+        }
         if (
           result.data === undefined ||
           (prevData !== null && equalityFn(prevData, result.data))
         ) {
           return
         }
         prevData = result.data
-        if (resolve) {
-          resolve(result.data)
-          resolve = null
+        if (settlePromise) {
+          settlePromise(result.data)
+          settlePromise = null
         } else {
           setData(result.data)
         }
@@ -73,9 +92,7 @@ export function atomWithQuery<
       observer
         .fetchOptimistic(defaultedOptions)
         .then(listener)
-        .catch(() => {
-          // TODO error handling
-        })
+        .catch((error) => listener({ error }))
       dataAtom.onMount = (update) => {
         setData = update
         const unsubscribe = observer.subscribe(listener)