mcpField
R
recent-data

recent-data

github.com/lobehubDevelopment83.6k863 installsUpdated today
Repository

About recent-data

A guide for developers using recent topics, resources, and pages in LobeHub. It explains session-store initialization, selector-based access, and the caching and refresh behavior of recent data.

Key features

  1. 01Initialize recent-data hooks
  2. 02Read via session store and selectors
  3. 03Access data through hook returns
  4. 04Cache data to avoid repeated loads
  5. 05Refresh automatically on focus

Use cases

  1. 01Initialize recent data at the app root
  2. 02Read recent records across components
  3. 03Wait for data initialization before rendering

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lobehub/lobehub --skill recent-data

After installing, type/recent-datain Claude Code to confirm it loaded.

Details

From the project README

Recent Data Usage Guide

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

  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

Comments

Markdown supported