selector caching for http errors

[Art2058]

export const searchFragmentState = atom({
  key: 'SearchFragmentState',
  default: ''
})
export const searchItemsState = selector({
  key: 'SearchItemsState',
  get: async ({ get }) => {
    const fragment = get(searchFragmentState)
    try {
      const { data } = await searchItems(fragment)
      return data
    } catch (error) {
      // Cancel or Http Error
      throw error
    }
  }
})

input 'a' -> setSearchFragment('a') -> Cancel or Http Error -> useRecoilValueLoadable(searchItemsState) -> hasError
Next input 'b' -> ... -> hasValue
Next input 'a' -> ... -> hasError

How to clear caching for errors?

[drarmstr]

Here is a pattern for manual query refreshes: https://recoiljs.org/docs/guides/asynchronous-data-queries#query-refresh

[Art2058]

Thank you for answer.
"query-refresh" doesn't care about stored cache values.
But you only need to clear the cache value where the Http Error is stored.

In "asynchronous autocomplete" It is good to think about re-input after network cancel has occurred.

[drarmstr]

See #972 for a feature request for explicit cache clearing.

[Art2058]

I solved the Cancel data, but I still had no choice but to leave a cache for the Error data.
Is this best?

// store
export const searchFragmentState = atom({
  key: 'SearchFragmentState',
  default: ''
})
export const searchCountState = atomFamily({
  key: 'SearchCountState',
  default: 0
})
export const searchItemsState = selectorFamily({
  key: 'SearchItemsState',
  get:
    fragment =>
    async ({ get }) => {
      get(searchCountState(fragment))

      if (!fragment) {
        return {
          message: 'Phrase must be a(n) string with a length of 1~100',
          data: []
        }
      }

      try {
        const res = await searchItems(fragment)
        return res.data
      } catch (error) {
        throw error
      }
    }
})

// components
export function Searchbar() {
  const [fragment, setSearchFragment] = useRecoilState(searchFragmentState)
  const searchItems = useRecoilValueLoadable(searchItemsState(fragment))
  const setSearchCountState = useSetRecoilState(searchCountState(fragment))
  useEffect(() => {
    if (searchItems.state === 'hasError' && axios.isCancel(searchItems.contents)) {
      // refresh on Cancel cache data
      // If "axios.isCancel(searchItems.contents)" does not exist and it is Error data, it will repeat indefinitely.
      setSearchCountState(count => count + 1)
    }
  }, [searchItems.state])

  const onInput = debounce((value: string) => {
    setSearchFragment(value.trimLeft())
  }, 200)

  const items = []
  if (searchItems.state === 'hasValue') {
    // items mapping...
  }

  return (
    ...
    <input onInput={onInput} ... />
    {items...}
    ...
  )
}

[Art2058]

Hi,
I solved this problem by making a hook like the one below.
When calling the hook, loadState is called and state.key is cached immediately.
In other words, the HTTP Request will only happen once and will not be loaded unless you call loadState again.
In the case of isLoading, it is implemented as atomFamily to share the state in case the same State is used in two places in one page at the same time.
setState is used to update state without reloading.

// custom hook
const stateIsCaches = new Map<string, boolean>()

const loadingState = atomFamily<boolean, string>({
  key: 'LoadingState',
  default: false
})

const useLoadableState = <T>(
  state: RecoilState<T>,
  getData: () => Promise<ApiResponseInterface<T>>
) => {
  const [isLoading, setIsLoading] = useRecoilState(loadingState(state.key))
  const [contents, setState] = useRecoilState(state)

  const loadState = useRecoilCallback(({ set }) => async () => {
    stateIsCaches.set(state.key, true)
    setIsLoading(true)
    try {
      const { data } = await getData()
      set(state, data)
    } catch (error) {
      stateIsCaches.set(state.key, false)
    } finally {
      setIsLoading(false)
    }
  })

  useEffect(() => {
    if (!stateIsCaches.get(state.key)) {
      loadState()
    }
  }, [state, getData])

  return {
    contents,
    isLoading,
    loadState,
    setState
  }
}

export default useLoadableState

ex1)

// store
export const searchFragmentState = atom({
  key: 'SearchFragmentState',
  default: ''
})
export const searchItemsState = atomFamily<SearchItemInterface[], string>({
  key: 'SearchItemsState',
  default: []
})

// components
export function Searchbar() {
  const [fragment, setSearchFragment] = useRecoilState(searchFragmentState)
  const items = useLoadableState(searchItemsState(fragment), () => {
    return fragment ? searchItems(fragment) : Promise.resolve({ data: [] })
  })
  
  const onInput = debounce((value: string) => {
    setSearchFragment(value.trimLeft())
  }, 200)

  return (
    ...
    <Loading isLoading={items.isLoading}>
    ...
    <input onInput={onInput} ... />
    ...
    <List>{items.contents...}</List>
    ...
  )
}

ex2)

// store
export const userState = atom<UserInterface>({
  key: 'UserState',
  default: userDefaultValue
})

// components
export function UserInfo() {
  const user = useLoadableState(userState, getUser)
  
  const refreshUser = () => {
    user.loadState()
  }
  
  const updateUser = async () => {
    await updateUserApi(formValues)
    user.setState({
      ...user.contents,
      ...formValues
    })
  }
  
  return (
    <...>
      <Info>{user.contents}</Info>
      <Button onClick={refreshUser}>Refresh User</Button>
      <Button onClick={updateUser}>Update User</Button>
    </...>
  )
}

If there is a better way, please share.
And can you tell me what's going on with this issue (#1182)?