Case Study: Infinite Scroll Feed

InfiniteQueryBuilder<FeedPage, String>(
  queryKey: const ['feed'],
  fetcher: FeedApi.getFeed,
  options: InfiniteQueryOptions<FeedPage, String>(
    initialPageParam: '', // '' = latest posts
    getNextPageParam: (last, _) => last.nextCursor, // older posts
    getPreviousPageParam: (first, _) => first.previousCursor, // non-null only after an eviction
    maxPages: 3, // 3 to see eviction quickly; 8 to 10 in production
    baseOptions: const QoraOptions(
      staleTime: Duration(minutes: 2),
      retryCount: 3,
    ),
  ),
  builder: (context, state, controller) => FeedList(state: state, controller: controller),
)

void _onScroll() {
  final pos = _scrollController.position;

  // Trigger next page when within 300px of the bottom
  if (pos.extentAfter < 300 &&
      _latestState case InfiniteSuccess(:final hasNextPage, :final isFetchingNextPage)
          when hasNextPage && !isFetchingNextPage) {
    controller.fetchNextPage();
  }

  // Trigger previous page when within 300px of the top
  // (only relevant after maxPages eviction has dropped page 1)
  if (pos.extentBefore < 300 &&
      _latestState case InfiniteSuccess(:final hasPreviousPage, :final isFetchingPreviousPage)
          when hasPreviousPage && !isFetchingPreviousPage) {
    controller.fetchPreviousPage();
  }
}

Future<void> _publish(String content) async {
  final client = context.qora;
  const feedKey = ['feed'];

  // 1. Snapshot for rollback
  final snapshot = client.getInfiniteQueryData<FeedPage, String?>(feedKey);

  // 2. Optimistic prepend to first page
  if (snapshot != null) {
    client.setInfiniteQueryData<FeedPage, String?>(
      feedKey,
      InfiniteData(
        pages: [
          FeedPage(
            posts: [
              Post.optimistic(
                id: 'temp-${DateTime.now().millisecondsSinceEpoch}',
                content: content,
                author: currentUser,
              ),
              ...snapshot.pages.first.posts,
            ],
            nextCursor: snapshot.pages.first.nextCursor,
            previousCursor: null, // optimistic post has no stable cursor yet
          ),
          ...snapshot.pages.skip(1),
        ],
        pageParams: snapshot.pageParams,
      ),
    );
  }

  try {
    // 3. Fire the real mutation
    await api.createPost(content);

    // 4. Invalidate: replace the optimistic item with the server response
    //    refetch() re-fetches all current pages preserving the page count
    await controller.refetch();
  } catch (error) {
    // 5. Rollback: restore the exact pre-mutation snapshot
    if (snapshot != null) {
      client.setInfiniteQueryData(feedKey, snapshot);
    }
    _showError(error);
  }
}

case InfiniteFailure(:final error, :final previousData):
  if (previousData != null) {
    final posts = previousData.flatten((p) => p.posts);
    return SliverList.builder(
      itemCount: posts.length + 1, // +1 for the error footer
      itemBuilder: (context, i) {
        if (i < posts.length) return PostTile(post: posts[i]);
        // Error footer at the very end
        return _LoadMoreErrorBanner(
          error: error,
          onRetry: controller.fetchNextPage,
        );
      },
    );
  }
  // No data at all: full error screen
  return SliverFillRemaining(child: ErrorScreen(error));

case InfiniteSuccess(:final data, :final hasNextPage, :final isFetchingNextPage):
  final posts = data.flatten((page) => page.posts); // List<Post>

  return SliverList.builder(
    itemCount: posts.length + 1,
    itemBuilder: (context, index) {
      if (index < posts.length) return PostTile(post: posts[index]);

      // Footer: spinner, "load more" trigger, or end-of-feed message
      if (isFetchingNextPage) return const _PageLoader();
      if (hasNextPage) return _LoadMoreButton(onTap: controller.fetchNextPage);
      return const _EndOfFeedBanner();
    },
  );