diff --git a/.changeset/five-doors-film.md b/.changeset/five-doors-film.md new file mode 100644 index 0000000000000..214bdad496741 --- /dev/null +++ b/.changeset/five-doors-film.md @@ -0,0 +1,25 @@ +--- +"@refinedev/core": patch +--- + +feat(core): deprecate `result` property in favor of `query.data` + +The `result.data` property in `useCustom` hook has been deprecated. This property always returns an empty object during loading state, which could lead to runtime errors when accessing nested properties without proper null checks. + +**Migration Guide:** + +Instead of using `result.data`, use `query.data.data` to access your custom response data: + +```diff +const { result, query } = useCustom({ + url: "https://api.example.com/endpoint", + method: "get", +}); + +- const data = result.data; ++ const data = query.data?.data; +``` + +This change provides better type safety and aligns with the underlying React Query behavior, ensuring TypeScript can properly catch potential runtime errors. + +Resolves #7088 diff --git a/documentation/docs/data/hooks/use-custom/index.md b/documentation/docs/data/hooks/use-custom/index.md index 77ed05bae7fb2..183e4172fc8b8 100644 --- a/documentation/docs/data/hooks/use-custom/index.md +++ b/documentation/docs/data/hooks/use-custom/index.md @@ -32,7 +32,9 @@ interface PostUniqueCheckResponse { const apiUrl = useApiUrl(); -const { data, isLoading } = useCustom({ +const { + query: { data, isLoading }, +} = useCustom({ url: `${apiUrl}/posts-unique-check`, method: "get", config: { @@ -316,10 +318,11 @@ useCustom({ ### Return value -| Description | Type | -| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -| Result of the TanStack Query's useQuery | [`QueryObserverResult, TError>`](https://tanstack.com/query/v4/docs/react/reference/useQuery) | -| overtime | `{ elapsedTime?: number }` | +| Description | Type | +| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | +| query | [`QueryObserverResult, TError>`](https://tanstack.com/query/v4/docs/react/reference/useQuery) | +| overtime | `{ elapsedTime?: number }` | +| result
Deprecated
| `{ data: CustomResponse["data"] }` Use `query.data?.data` instead | [baserecord]: /docs/core/interface-references#baserecord [httperror]: /docs/core/interface-references#httperror diff --git a/examples/app-crm-minimal/src/routes/dashboard/index.tsx b/examples/app-crm-minimal/src/routes/dashboard/index.tsx index 138af3c41bb7a..708093f6574ff 100644 --- a/examples/app-crm-minimal/src/routes/dashboard/index.tsx +++ b/examples/app-crm-minimal/src/routes/dashboard/index.tsx @@ -13,16 +13,15 @@ import { import { DASHBOARD_TOTAL_COUNTS_QUERY } from "./queries"; export const DashboardPage = () => { - const { - query: { isLoading }, - - result: data, - } = useCustom({ + const { query } = useCustom({ url: "", method: "get", meta: { gqlQuery: DASHBOARD_TOTAL_COUNTS_QUERY }, }); + const { isLoading } = query; + const data = query.data?.data; + return (
@@ -30,25 +29,24 @@ export const DashboardPage = () => { - - + {" "} { - { export const DashboardPage: React.FC = () => { const API_URL = useApiUrl("metrics"); - const { result: dailyRevenue } = useCustom({ + const { query: dailyRevenueQuery } = useCustom({ url: `${API_URL}/dailyRevenue`, method: "get", config: { @@ -38,7 +38,7 @@ export const DashboardPage: React.FC = () => { }, }); - const { result: dailyOrders } = useCustom({ + const { query: dailyOrdersQuery } = useCustom({ url: `${API_URL}/dailyOrders`, method: "get", config: { @@ -46,13 +46,18 @@ export const DashboardPage: React.FC = () => { }, }); - const { result: newCustomers } = useCustom({ + const { query: newCustomersQuery } = useCustom({ url: `${API_URL}/newCustomers`, method: "get", config: { query, }, }); + + const dailyRevenue = dailyRevenueQuery.data?.data; + const dailyOrders = dailyOrdersQuery.data?.data; + const newCustomers = newCustomersQuery.data?.data; + return (
Dashboard @@ -67,40 +72,34 @@ export const DashboardPage: React.FC = () => {
diff --git a/packages/core/src/hooks/data/useCustom.ts b/packages/core/src/hooks/data/useCustom.ts index 1c0299bbe38fc..ff5885919b92a 100644 --- a/packages/core/src/hooks/data/useCustom.ts +++ b/packages/core/src/hooks/data/useCustom.ts @@ -109,6 +109,9 @@ export type UseCustomProps = { export type UseCustomReturnType = { query: QueryObserverResult, TError>; + /** + * @deprecated Please use `query.data.data` instead. + */ result: { data: CustomResponse["data"]; };