home / skills / lobehub / lobe-chat / recent-data

recent-data skill

safe

This skill helps you efficiently access and manage recently used topics, resources, and pages with session-store guidance and type-safe patterns.

npx playbooks add skill lobehub/lobe-chat --skill recent-data

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.7 KB

---
name: recent-data
description: Guide for using Recent Data (topics, resources, pages). Use when working with recently accessed items, implementing recent lists, or accessing session store recent data. Triggers on recent data usage or implementation tasks.
user-invocable: false
---

# Recent Data Usage Guide

Recent data (recentTopics, recentResources, recentPages) is stored in session store.

## Initialization

In app top-level (e.g., `RecentHydration.tsx`):

```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)

```tsx
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)

```tsx
const { data: recentTopics, isLoading } = useInitRecentTopic();
```

## Available Selectors

### Recent Topics

```tsx
const recentTopics = useSessionStore(recentSelectors.recentTopics);
// Type: RecentTopic[]

const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);
// Type: boolean
```

**RecentTopic type:**
```typescript
interface RecentTopic {
  agent: { avatar: string | null; backgroundColor: string | null; id: string; title: string | null } | null;
  id: string;
  title: string | null;
  updatedAt: Date;
}
```

### Recent Resources

```tsx
const recentResources = useSessionStore(recentSelectors.recentResources);
// Type: FileListItem[]

const isInit = useSessionStore(recentSelectors.isRecentResourcesInit);
```

### Recent Pages

```tsx
const recentPages = useSessionStore(recentSelectors.recentPages);
const isInit = useSessionStore(recentSelectors.isRecentPagesInit);
```

## Features

1. **Auto login detection**: Only loads when user is logged in
2. **Data caching**: Stored in store, no repeated loading
3. **Auto refresh**: SWR refreshes on focus (5-minute interval)
4. **Type safe**: Full TypeScript types

## Best Practices

1. Initialize all recent data at app top-level
2. Use selectors to read from store
3. For multi-component use, prefer Method 1
4. Use selectors for render optimization

Overview

This skill guides developers on using Recent Data (recentTopics, recentResources, recentPages) stored in the session store. It explains initialization, recommended read patterns, available selectors, and practical tips for efficient rendering and caching. Use it when you need to surface or implement recently accessed items in an app.

How this skill works

Recent data is hydrated at app top-level and kept in the session store, with TypeScript types for safety. Initialization hooks populate recentTopics, recentResources, and recentPages only when the user is logged in, and SWR-style refresh keeps data fresh on focus. Consumers read data via selectors from the session store or use the single-component hook return for ad-hoc usage.

When to use it

When showing recently opened topics, files, or pages in UI panels or dashboards
When implementing a session-based recent items list with caching and auto-refresh
When multiple components need the same recent data to avoid duplicate loads
When you need type-safe access to recent items in a TypeScript codebase
When you want auto login detection so recent data only loads for authenticated users

Best practices

Initialize recentTopics, recentResources, and recentPages at the app top-level (e.g., RecentHydration.tsx)
Prefer reading from the session store via selectors for multi-component usage to avoid redundant fetches
Use the hook return (useInitRecentTopic/useInitRecentResource/useInitRecentPage) only for single-component or one-off reads
Rely on isInit selectors to show loading states and avoid rendering incomplete data
Leverage selectors to optimize renders and keep components focused on UI, not data fetching

Example use cases

Display a "Recently Viewed" sidebar that lists recentTopics with avatars and timestamps
Implement a file picker that surfaces recentResources for quick access
Show recentPages on a dashboard with fast load because data is cached in the session store
Hydrate recent data once during app startup to enable instant access across routes
Use isRecentTopicsInit to render skeletons until data is ready

FAQ

How do I initialize recent data so it loads once for the whole app?

Call the initialization hooks (useInitRecentTopic, useInitRecentResource, useInitRecentPage) at the app top-level so hydration runs once and fills the session store.

Which method should I use to consume recent data in multiple components?

Use selectors with useSessionStore (Method 1). It reads from the session store and prevents duplicate loading across components.

How do I show a loading state while recent data is initializing?

Read the corresponding isInit selector (e.g., isRecentTopicsInit) and render a loading indicator until it becomes true.