diff --git a/examples/app-crm-minimal/src/routes/tasks/list/index.tsx b/examples/app-crm-minimal/src/routes/tasks/list/index.tsx index 75df93b90dd10..6080f8b811374 100644 --- a/examples/app-crm-minimal/src/routes/tasks/list/index.tsx +++ b/examples/app-crm-minimal/src/routes/tasks/list/index.tsx @@ -48,6 +48,18 @@ export const TasksListPage = ({ children }: React.PropsWithChildren) => { meta: { gqlQuery: TASK_STAGES_QUERY, }, + queryOptions: { + select: React.useCallback((data) => { + console.log("select", Math.random()); + return data; + }, []), + }, + // queryOptions: { + // select: (data) => { + // console.log("select", Math.random()); + // return data; + // }, + // }, }); const { data: tasks, isLoading: isLoadingTasks } = useList< diff --git a/packages/core/src/hooks/data/useList.ts b/packages/core/src/hooks/data/useList.ts index aa6f7dcb8d554..8a38538d1f7cc 100644 --- a/packages/core/src/hooks/data/useList.ts +++ b/packages/core/src/hooks/data/useList.ts @@ -40,6 +40,7 @@ import { type UseLoadingOvertimeReturnType, useLoadingOvertime, } from "../useLoadingOvertime"; +import { useCallback, useMemo } from "react"; export interface UseListConfig { pagination?: Pagination; @@ -173,11 +174,15 @@ export const useList = < hasPagination, config?.hasPagination, ); - const prefferedPagination = handlePaginationParams({ - pagination, - configPagination: config?.pagination, - hasPagination: prefferedHasPagination, - }); + const prefferedPagination = useMemo( + () => + handlePaginationParams({ + pagination, + configPagination: config?.pagination, + hasPagination: prefferedHasPagination, + }), + [pagination, config?.pagination, prefferedHasPagination], + ); const isServerPagination = prefferedPagination.mode === "server"; const combinedMeta = getMeta({ resource, meta: preferredMeta }); @@ -225,6 +230,32 @@ export const useList = < }, }); + const querySelectCB = (rawData: GetListResponse) => { + let data = rawData; + + const { current, mode, pageSize } = prefferedPagination; + + if (mode === "client") { + data = { + ...data, + data: data.data.slice((current - 1) * pageSize, current * pageSize), + total: data.total, + }; + } + + if (queryOptions?.select) { + return queryOptions?.select?.(data); + } + + return data as unknown as GetListResponse; + }; + const querySelect = useCallback(querySelectCB, [ + prefferedPagination, + queryOptions?.select, + ]); + + console.log([prefferedPagination, queryOptions?.select]); + const queryResponse = useQuery< GetListResponse, TError, @@ -270,25 +301,7 @@ export const useList = < typeof queryOptions?.enabled !== "undefined" ? queryOptions?.enabled : !!resource?.name, - select: (rawData) => { - let data = rawData; - - const { current, mode, pageSize } = prefferedPagination; - - if (mode === "client") { - data = { - ...data, - data: data.data.slice((current - 1) * pageSize, current * pageSize), - total: data.total, - }; - } - - if (queryOptions?.select) { - return queryOptions?.select?.(data); - } - - return data as unknown as GetListResponse; - }, + select: querySelect, onSuccess: (data) => { queryOptions?.onSuccess?.(data);