Incremental loading for infinite scrolling

I am implementing infinite scrolling for a list of tickets. Currently, recoil doesnt seem to offer a way to get all data that a selector has fetched.

Example:

export const issues = selector({
  key: 'issueList',
  get: async ({ get }) => {
    const cursor = get(issuesCursor);
    const client = getApolloClient();
    const issues = await client.query<IssuesQuery, IssuesQueryVariables>({
      query: IssuesDocument,
      variables: {
        cursor,
      },
    });
    return { nextCursor: issues.data.issuesCursor.cursor, items: issues.data.issuesCursor.items };
  },
});
export const issueList = selector({
  key: 'nextIssuesCursor',
  get: ({ get }) => get(issues).items,
});

I would like to receive all issues from the issueList selector.

I can solve this issue with a hook, yet i would strongly prefer keeping all the data fetching in recoiljs.

[mastorm]

I finished implementing the way @drarmstr recommended and it worked like a charm. Thanks a lot.

[drarmstr]

@mastorm / @BenjaBobs Would a solution using useRecoilCallback() like the following work?

export const allItems = atom<Array<Item>>>({
  key: 'allItems',
  default: [],
});

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

export fetchMoreItems = useRecoilCallback(({snapshot, set}) => async () => {
  set(currentCursorInternal, cursor => {
    const next = cursor + 1;
    promiseDone(ApiCall(next), newData => {
      // TODO use some queue mechanism to handle out-of-order responses.
      set(allItems, existing => [...existing, ...newData]);
    });
    return next;
  });
});

But, the most versatile or appropriate for this situation might be using the waitForNone() helper to handle the incremental loading pattern:

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>
  );
}