fix(core): Allow retries for errored async reads

src/core/store.ts

@@ -177,6 +177,7 @@ export const createStore = (
  return
  }
  atomState.c?.() // cancel read promise
+ delete atomState.e // read error
  if (isInterruptablePromise(promise)) {
  atomState.p = promise // read promise
  delete atomState.c // this promise is from another atom state, shouldn't be canceled here

tests/error.test.tsx

@@ -26,7 +26,12 @@ class ErrorBoundary extends Component<
  }
  render() {
  return this.state.hasError ? (
- <div>{this.props.message || 'errored'}</div>
+ <div>
+ {this.props.message || 'errored'}
+ <button onClick={() => this.setState({ hasError: false })}>
+ retry
+ </button>
+ </div>
  ) : (
  this.props.children
  )
@@ -447,3 +452,79 @@ describe('throws an error while updating in effect cleanup', () => {
  expect(console.error).toHaveBeenCalledTimes(1)
  })
 })
+
+describe('error recovery', () => {
+ const counter = atom(0)
+
+ const Counter = () => {
+ const [count, setCount] = useAtom(counter)
+ return <button onClick={() => setCount(count + 1)}>increment</button>
+ }
+
+ it('recovers from sync errors', async () => {
+ const syncAtom = atom((get) => {
+ const value = get(counter)
+
+ if (value === 0) {
+ throw new Error('An error occurred')
+ }
+
+ return value
+ })
+
+ const Display = () => {
+ return <div>Value: {useAtom(syncAtom)[0]}</div>
+ }
+
+ const { getByText, findByText } = render(
+ <Provider>
+ <Counter />
+ <ErrorBoundary>
+ <Display />
+ </ErrorBoundary>
+ </Provider>
+ )
+
+ await findByText('errored')
+
+ fireEvent.click(getByText('increment'))
+ fireEvent.click(getByText('retry'))
+ await findByText('Value: 1')
+ })
+
+ it.only('recovers from async errors', async () => {
+ const asyncAtom = atom(async (get) => {
+ const value = get(counter)
+ await new Promise((resolve) => {
+ setTimeout(resolve, 50)
+ })
+
+ if (value === 0) {
+ throw new Error('An error occurred')
+ }
+
+ return value
+ })
+
+ const Display = () => {
+ return <div>Value: {useAtom(asyncAtom)[0]}</div>
+ }
+
+ const { getByText, findByText } = render(
+ <Provider>
+ <Counter />
+ <ErrorBoundary>
+ <Suspense fallback={null}>
+ <Display />
+ </Suspense>
+ </ErrorBoundary>
+ </Provider>
+ )
+
+ await findByText('errored')
+
+ fireEvent.click(getByText('increment'))
+ fireEvent.click(getByText('retry'))
+ await findByText('Value: 1')
+ })
+})

tests/utils/atomWithObservable.test.tsx

@@ -1,4 +1,4 @@
-import { Component, Suspense } from 'react'
+import { Suspense } from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { Observable, Subject } from 'rxjs'
 import { useAtom } from '../../src/index'
@@ -7,31 +7,6 @@ import { getTestProvider } from '../testUtils'
 
 const Provider = getTestProvider()
 
-class ErrorBoundary extends Component<
- { message?: string },
- { hasError: boolean }
-> {
- constructor(props: { message?: string }) {
- super(props)
- this.state = { hasError: false }
- }
- static getDerivedStateFromError() {
- return { hasError: true }
- }
- render() {
- return this.state.hasError ? (
- <div>
- <div>{this.props.message || 'errored'}</div>
- <button onClick={() => this.setState({ hasError: false })}>
- retry
- </button>
- </div>
- ) : (
- this.props.children
- )
- }
-}
-
 it('count state', async () => {
  const observableAtom = atomWithObservable(
  () =>
@@ -95,32 +70,3 @@ it('writable count state', async () => {
  fireEvent.click(getByText('button'))
  await findByText('count: 9')
 })
-
-// FIXME we would like to support retry
-it.skip('count state with error', async () => {
- const myObservable = new Observable<number>((subscriber) => {
- subscriber.error('err1')
- subscriber.next(1)
- })
- const observableAtom = atomWithObservable(() => myObservable)
-
- const Counter = () => {
- const [state] = useAtom(observableAtom)
-
- return <div>count: {state}</div>
- }
-
- const { findByText, getByText } = render(
- <Provider>
- <ErrorBoundary>
- <Suspense fallback="loading">
- <Counter />
- </Suspense>
- </ErrorBoundary>
- </Provider>
- )
-
- await findByText('errored')
- fireEvent.click(getByText('retry'))
- await findByText('count: 1')
-})