52 lines
1.1 KiB
Markdown
52 lines
1.1 KiB
Markdown
---
|
|
id: prefetching
|
|
title: Prefetching & Router Integration
|
|
ref: docs/framework/react/guides/prefetching.md
|
|
replace: { 'react-query': 'preact-query', 'React': 'Preact' }
|
|
---
|
|
|
|
[//]: # 'ExampleConditionally1'
|
|
|
|
```tsx
|
|
// This lazy loads the GraphFeedItem component, meaning
|
|
// it wont start loading until something renders it
|
|
import { lazy } from 'preact/iso'
|
|
|
|
const GraphFeedItem = lazy(() => import('./GraphFeedItem'))
|
|
|
|
function Feed() {
|
|
const { data, isPending } = useQuery({
|
|
queryKey: ['feed'],
|
|
queryFn: getFeed,
|
|
})
|
|
|
|
if (isPending) {
|
|
return 'Loading feed...'
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{data.map((feedItem) => {
|
|
if (feedItem.type === 'GRAPH') {
|
|
return <GraphFeedItem key={feedItem.id} feedItem={feedItem} />
|
|
}
|
|
|
|
return <StandardFeedItem key={feedItem.id} feedItem={feedItem} />
|
|
})}
|
|
</>
|
|
)
|
|
}
|
|
|
|
// GraphFeedItem.tsx
|
|
function GraphFeedItem({ feedItem }) {
|
|
const { data, isPending } = useQuery({
|
|
queryKey: ['graph', feedItem.id],
|
|
queryFn: getGraphDataById,
|
|
})
|
|
|
|
...
|
|
}
|
|
```
|
|
|
|
[//]: # 'ExampleConditionally1'
|