infinite scroll with recoil example

infinitescrollwithrecoil.js

const itemQuery = selectorFamily({
  key: 'ItemQuery',
  get: cursor => () => ApiCall(cursor),
});

const currentCursorInternal = atom<number>({
  key: 'currentCursorInternal',
  default: 0,
});

export function useFetchMoreItems() {
  const setCurrentCursor = useSetRecoilState(currentCursorInternal);
  return () => setCurrentCursor(cursor => cursor + 1);
}

export const allItems = selector({
  key: 'AllItems',
  get: ({get}) => {
    const current = get(currentCursorInternal);
    const cursorRange = Array.from(Array(current).keys());
    return get(waitForNone(cursorRange.map(itemQuery)));
  },
});

function ShowItemsComponent() {
  const itemLoadables = useGetRecoilValue(allItems);
  const fetchMoreItems = useFetchMoreItems();
  return (
    <div>
      <button onClick={fetchMoreItems}>Fetch More Items</button>
      {itemLoadables.map(itemLoadable => ({
        hasValue: <Item item={itemLoadable.contents} key={itemLoadable.contents} />,
        hasError: <Error error={itemLoadable.contents} key={itemLoadable.contents} />,
        loading: <CoolShimmer key={itemLoadable.contents} />,
      }[itemLoadable.state])}
    </div>
  );
}