feat: add reloadKey prop to various components for improved data fetching control

This commit is contained in:
mlogclub
2026-05-28 12:40:36 +08:00
parent 3fe5a89aeb
commit dbcb1d83de
5 changed files with 15 additions and 3 deletions
@@ -196,6 +196,7 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
filters, filters,
fetchList, fetchList,
enabled: Boolean(knowledgeBaseId), enabled: Boolean(knowledgeBaseId),
reloadKey: knowledgeBaseId,
loadFailed: t("knowledge.loadDocumentsFailed"), loadFailed: t("knowledge.loadDocumentsFailed"),
}); });
@@ -200,6 +200,7 @@ export function RetrieveLogList({
}, },
]} ]}
fetchList={(query) => fetchKnowledgeRetrieveLogs({ knowledgeBaseId, ...query })} fetchList={(query) => fetchKnowledgeRetrieveLogs({ knowledgeBaseId, ...query })}
reloadKey={knowledgeBaseId}
getItemId={(item) => item.id} getItemId={(item) => item.id}
getRowClassName={() => "cursor-pointer"} getRowClassName={() => "cursor-pointer"}
onRowClick={(item) => handleOpenDetail(item.id)} onRowClick={(item) => handleOpenDetail(item.id)}
@@ -163,6 +163,7 @@ export type DashboardCrudPageProps<TItem, TPayload> = {
handleLabel: string handleLabel: string
} }
pageSize?: number pageSize?: number
reloadKey?: string | number | null
layout?: "page" | "fragment" layout?: "page" | "fragment"
showToolbar?: boolean showToolbar?: boolean
showToolbarActions?: boolean showToolbarActions?: boolean
@@ -205,6 +206,7 @@ export function DashboardCrudPage<TItem, TPayload>({
renderRowActions, renderRowActions,
sort, sort,
pageSize = 20, pageSize = 20,
reloadKey,
layout = "page", layout = "page",
showToolbar = true, showToolbar = true,
showToolbarActions = true, showToolbarActions = true,
@@ -227,6 +229,7 @@ export function DashboardCrudPage<TItem, TPayload>({
filters, filters,
fetchList, fetchList,
pageSize, pageSize,
reloadKey,
loadFailed: labels.loadFailed, loadFailed: labels.loadFailed,
}) })
const draftFilters = list.draftFilters const draftFilters = list.draftFilters
@@ -68,6 +68,7 @@ export type DashboardListPageProps<TItem> = {
onRowClick?: (item: TItem) => void onRowClick?: (item: TItem) => void
pageSize?: number pageSize?: number
enabled?: boolean enabled?: boolean
reloadKey?: string | number | null
layout?: "page" | "fragment" layout?: "page" | "fragment"
tableShellClassName?: string tableShellClassName?: string
labels: { labels: {
@@ -90,6 +91,7 @@ export function DashboardListPage<TItem>({
onRowClick, onRowClick,
pageSize, pageSize,
enabled, enabled,
reloadKey,
layout = "page", layout = "page",
tableShellClassName, tableShellClassName,
labels, labels,
@@ -99,6 +101,7 @@ export function DashboardListPage<TItem>({
fetchList, fetchList,
pageSize, pageSize,
enabled, enabled,
reloadKey,
loadFailed: labels.loadFailed, loadFailed: labels.loadFailed,
}) })
const renderContext: DashboardListRenderContext<TItem> = { const renderContext: DashboardListRenderContext<TItem> = {
@@ -1,6 +1,6 @@
"use client" "use client"
import { useCallback, useEffect, useState } from "react" import { useCallback, useEffect, useRef, useState } from "react"
import { toast } from "sonner" import { toast } from "sonner"
import { import {
@@ -24,6 +24,7 @@ export type DashboardPagedListOptions<TItem> = {
pageSize?: number pageSize?: number
loadFailed: string loadFailed: string
enabled?: boolean enabled?: boolean
reloadKey?: string | number | null
} }
export function useDashboardPagedList<TItem>({ export function useDashboardPagedList<TItem>({
@@ -32,7 +33,10 @@ export function useDashboardPagedList<TItem>({
pageSize = 20, pageSize = 20,
loadFailed, loadFailed,
enabled = true, enabled = true,
reloadKey,
}: DashboardPagedListOptions<TItem>) { }: DashboardPagedListOptions<TItem>) {
const fetchListRef = useRef(fetchList)
fetchListRef.current = fetchList
const filtersKey = filters const filtersKey = filters
.map( .map(
(filter) => (filter) =>
@@ -65,7 +69,7 @@ export function useDashboardPagedList<TItem>({
setLoading(true) setLoading(true)
try { try {
const data = await fetchList( const data = await fetchListRef.current(
buildDashboardCrudQuery({ buildDashboardCrudQuery({
values: appliedFilters, values: appliedFilters,
filters, filters,
@@ -80,7 +84,7 @@ export function useDashboardPagedList<TItem>({
setLoading(false) setLoading(false)
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [appliedFilters, enabled, fetchList, filtersKey, limit, loadFailed, page]) }, [appliedFilters, enabled, filtersKey, limit, loadFailed, page, reloadKey])
useEffect(() => { useEffect(() => {
void loadData() void loadData()