65 lines
1.6 KiB
Markdown
65 lines
1.6 KiB
Markdown
---
|
|
id: paginated-queries
|
|
title: Paginated / Lagged Queries
|
|
ref: docs/framework/react/guides/paginated-queries.md
|
|
replace: { 'react-query': 'preact-query', 'React': 'Preact' }
|
|
---
|
|
|
|
[//]: # 'Example2'
|
|
|
|
```tsx
|
|
import { keepPreviousData, useQuery } from '@tanstack/preact-query'
|
|
import { useState } from 'preact/hooks'
|
|
|
|
function Todos() {
|
|
const [page, setPage] = useState(0)
|
|
|
|
const fetchProjects = (page = 0) =>
|
|
fetch('/api/projects?page=' + page).then((res) => res.json())
|
|
|
|
const { isPending, isError, error, data, isFetching, isPlaceholderData } =
|
|
useQuery({
|
|
queryKey: ['projects', page],
|
|
queryFn: () => fetchProjects(page),
|
|
placeholderData: keepPreviousData,
|
|
})
|
|
|
|
return (
|
|
<div>
|
|
{isPending ? (
|
|
<div>Loading...</div>
|
|
) : isError ? (
|
|
<div>Error: {error.message}</div>
|
|
) : (
|
|
<div>
|
|
{data.projects.map((project) => (
|
|
<p key={project.id}>{project.name}</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
<span>Current Page: {page + 1}</span>
|
|
<button
|
|
onClick={() => setPage((old) => Math.max(old - 1, 0))}
|
|
disabled={page === 0}
|
|
>
|
|
Previous Page
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
if (!isPlaceholderData && data.hasMore) {
|
|
setPage((old) => old + 1)
|
|
}
|
|
}}
|
|
// Disable the Next Page button until we know a next page is available
|
|
disabled={isPlaceholderData || !data?.hasMore}
|
|
>
|
|
Next Page
|
|
</button>
|
|
{isFetching ? <span> Loading...</span> : null}
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
[//]: # 'Example2'
|