GPT

Infinite Query Example

// src/hooks/useInfiniteUsers.ts import { useInfiniteQuery } from '@tanstack/react-query'; import { db } from '../db'; import { users, type User } from '../db/schema'; const PAGESIZE = 10; export function useInfiniteUs

Prompt text

Original English text. Replace placeholders with your own details.

// src/hooks/useInfiniteUsers.ts
import { useInfiniteQuery } from '@tanstack/react-query';
import { db } from '../db';
import { users, type User } from '../db/schema';

const PAGE_SIZE = 10;

export function useInfiniteUsers() {
 return useInfiniteQuery({
 queryKey: ['users', 'infinite'],
 queryFn: async ({ pageParam = 0 }) => {
 const offset = pageParam * PAGE_SIZE;
 const users = await db
 .select()
 .from(users)
 .orderBy(users.name)
 .limit(PAGE_SIZE)
 .offset(offset);
 return users;
 },
 getNextPageParam: (lastPage, allPages) => {
 return lastPage.length === PAGE_SIZE ? allPages.length : undefined;
 },
 });
}

// src/components/InfiniteUserList.tsx
import { useInfiniteUsers } from '../hooks/useInfiniteUsers';

export function InfiniteUserList() {
 const {
 data,
 isLoading,
 error,
 hasNextPage,
 fetchNextPage,
 isFetchingNextPage,
 } = useInfiniteUsers();

 if (isLoading) return <div>Loading...</div>;
 if (error) return <div>Error: {error.message}</div>;

 return (
 <div>
 <h2>Users</h2>

 <ul>
 {data.pages.map((page, i) => (
 <React.Fragment key={i}>
 {page.map((user) => (
 <li key={user.id}>
 {user.name} ({user.email})
 </li>
 ))}
 </React.Fragment>
 ))}
 </ul>

 {hasNextPage && (
 <button
 onClick={() => fetchNextPage()}
 disabled={isFetchingNextPage}
 >
 {isFetchingNextPage ? 'Loading more...' : 'Load More'}
 </button>
 )}
 </div>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →