Efficient pagination for Google Antigravity IDE
# Pagination Patterns for Google Antigravity
Master pagination in Google Antigravity IDE. This guide covers offset, cursor, and keyset pagination.
## Cursor-Based Pagination
```typescript
interface PaginatedResult<T> {
items: T[];
nextCursor: string | null;
hasMore: boolean;
}
async function getPaginatedPosts(
cursor?: string,
limit = 20
): Promise<PaginatedResult<Post>> {
const posts = await prisma.post.findMany({
take: limit + 1,
cursor: cursor ? { id: cursor } : undefined,
orderBy: { createdAt: "desc" },
include: { author: true }
});
const hasMore = posts.length > limit;
const items = hasMore ? posts.slice(0, -1) : posts;
const nextCursor = hasMore ? items[items.length - 1].id : null;
return { items, nextCursor, hasMore };
}
```
## API Route
```typescript
import { NextRequest, NextResponse } from "next/server";
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const cursor = searchParams.get("cursor") || undefined;
const limit = parseInt(searchParams.get("limit") || "20");
const result = await getPaginatedPosts(cursor, Math.min(limit, 100));
return NextResponse.json(result);
}
```
## React Query Integration
```typescript
import { useInfiniteQuery } from "@tanstack/react-query";
function usePosts() {
return useInfiniteQuery({
queryKey: ["posts"],
queryFn: async ({ pageParam }) => {
const params = pageParam ? `?cursor=${pageParam}` : "";
const res = await fetch(`/api/posts${params}`);
return res.json();
},
initialPageParam: undefined as string | undefined,
getNextPageParam: (lastPage) => lastPage.nextCursor
});
}
function PostList() {
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = usePosts();
return (
<div>
{data?.pages.flatMap(page => page.items).map(post => (
<PostCard key={post.id} post={post} />
))}
{hasNextPage && (
<button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}>
{isFetchingNextPage ? "Loading..." : "Load More"}
</button>
)}
</div>
);
}
```
## Best Practices
1. **Use cursor pagination** - Better performance
2. **Limit page size** - Prevent large responses
3. **Include total count sparingly** - Expensive query
Google Antigravity IDE provides pagination scaffolding.This Pagination prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their pagination implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For Pagination projects, consider mentioning your framework version, coding style, and any specific libraries you're using.