Recent data (recentTopics, recentResources, recentPages) is stored in session store.
Initialization
In app top-level (e.g.,
RecentHydration.tsx
):
import
{
useInitRecentTopic
}
from
'@/hooks/useInitRecentTopic'
;
import
{
useInitRecentResource
}
from
'@/hooks/useInitRecentResource'
;
import
{
useInitRecentPage
}
from
'@/hooks/useInitRecentPage'
;
const
App
=
(
)
=>
{
useInitRecentTopic
(
)
;
useInitRecentResource
(
)
;
useInitRecentPage
(
)
;
return
<
YourComponents
/>
;
}
;
Usage
Method 1: Read from Store (Recommended)
import
{
useSessionStore
}
from
'@/store/session'
;
import
{
recentSelectors
}
from
'@/store/session/selectors'
;
const
Component
=
(
)
=>
{
const
recentTopics
=
useSessionStore
(
recentSelectors
.
recentTopics
)
;
const
isInit
=
useSessionStore
(
recentSelectors
.
isRecentTopicsInit
)
;
if
(
!
isInit
)
return
<
div
>
Loading...
</
div
>
;
return
(
<
div
>
{
recentTopics
.
map
(
(
topic
)
=>
(
<
div
key
=
{
topic
.
id
}
>
{
topic
.
title
}
</
div
>
)
)
}
</
div
>
)
;
}
;
Method 2: Use Hook Return (Single component)
const
{
data
:
recentTopics
,
isLoading
}
=
useInitRecentTopic
(
)
;
Available Selectors
Recent Topics
const
recentTopics
=
useSessionStore
(
recentSelectors
.
recentTopics
)
;
// Type: RecentTopic[]
const
isInit
=
useSessionStore
(
recentSelectors
.
isRecentTopicsInit
)
;
// Type: boolean
RecentTopic type:
interface
RecentTopic
{
agent
:
{
avatar
:
string
|
null
;
backgroundColor
:
string
|
null
;
id
:
string
;
title
:
string
|
null
;
}
|
null
;
id
:
string
;
title
:
string
|
null
;
updatedAt
:
Date
;
}
Recent Resources
const
recentResources
=
useSessionStore
(
recentSelectors
.
recentResources
)
;
// Type: FileListItem[]
const
isInit
=
useSessionStore
(
recentSelectors
.
isRecentResourcesInit
)
;
Recent Pages
const
recentPages
=
useSessionStore
(
recentSelectors
.
recentPages
)
;
const
isInit
=
useSessionStore
(
recentSelectors
.
isRecentPagesInit
)
;
Features
Auto login detection
Only loads when user is logged in
Data caching
Stored in store, no repeated loading
Auto refresh
SWR refreshes on focus (5-minute interval)
Type safe
Full TypeScript types
Best Practices
Initialize all recent data at app top-level
Use selectors to read from store
For multi-component use, prefer Method 1
Use selectors for render optimization