@salesforce/templates 66.7.13 → 66.9.0

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Login.tsx

@@ -4,10 +4,10 @@ import { z } from "zod";
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 import { ROUTES } from "../authenticationConfig";
 import { emailSchema, getStartUrl, type AuthResponse } from "../authHelpers";
-import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+import { ApiError, handleApiResponse } from "../utils/helpers";
 
 const loginSchema = z.object({
 	email: emailSchema,
@@ -17,7 +17,7 @@ const loginSchema = z.object({
 export default function Login() {
 	const navigate = useNavigate();
 	const [searchParams] = useSearchParams();
-	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitError, setSubmitError] = useState<React.ReactNode>(null);
 
 	const form = useAppForm({
 		defaultValues: { email: "", password: "" },
@@ -43,7 +43,7 @@ export default function Login() {
 						Accept: "application/json",
 					},
 				});
-				const result = await handleApiResponse<AuthResponse>(response, "Login failed");
+				const result = await handleApiResponse<AuthResponse>(response);
 				if (result?.redirectUrl) {
 					// Hard navigate to the URL which establishes the server session cookie
 					window.location.replace(result.redirectUrl);
@@ -52,7 +52,22 @@ export default function Login() {
 					navigate("/", { replace: true });
 				}
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Login failed"));
+				console.error("Login failed", err);
+				if (err instanceof ApiError) {
+					setSubmitError(
+						err.errors.length === 1 ? (
+							err.errors[0]
+						) : (
+							<ul>
+								{err.errors.map((e, i) => (
+									<li key={i}>{e}</li>
+								))}
+							</ul>
+						),
+					);
+				} else {
+					setSubmitError("Login failed");
+				}
 			}
 		},
 		onSubmitInvalid: () => {},

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Profile.tsx

@@ -2,14 +2,14 @@ import { useState, useEffect } from "react";
 import { z } from "zod";
 
 import { CenteredPageLayout } from "../layout/centered-page-layout";
-import { CardSkeleton } from "../layout/card-skeleton";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
 import { ROUTES } from "../authenticationConfig";
 import { emailSchema } from "../authHelpers";
-import { getErrorMessage } from "../utils/helpers";
 import { useUser } from "../context/AuthContext";
 import { fetchUserProfile, updateUserProfile } from "../api/userProfileApi";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { Field, FieldLabel } from "../../../components/ui/field";
 
 const optionalString = z
 	.string()
@@ -32,6 +32,38 @@ const profileSchema = z.object({
 
 type ProfileFormValues = z.infer<typeof profileSchema>;
 
+function FieldSkeleton({ label }: { label: string }) {
+	return (
+		<Field>
+			<FieldLabel>{label}</FieldLabel>
+			<Skeleton className="h-9 w-full rounded-md" />
+		</Field>
+	);
+}
+
+function ProfileFieldsSkeleton() {
+	return (
+		<div role="status" aria-live="polite">
+			<span className="sr-only">Loading profile…</span>
+			<FieldSkeleton label="Email" />
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+				<FieldSkeleton label="First name" />
+				<FieldSkeleton label="Last name" />
+			</div>
+			<FieldSkeleton label="Phone" />
+			<FieldSkeleton label="Street" />
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+				<FieldSkeleton label="City" />
+				<FieldSkeleton label="State" />
+			</div>
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+				<FieldSkeleton label="Postal Code" />
+				<FieldSkeleton label="Country" />
+			</div>
+		</div>
+	);
+}
+
 export default function Profile() {
 	const user = useUser();
 	const [profile, setProfile] = useState<ProfileFormValues | null>(null);
@@ -62,7 +94,8 @@ export default function Profile() {
 				setSuccess(true);
 				window.scrollTo({ top: 0, behavior: "smooth" });
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Failed to update profile"));
+				console.error("Failed to update profile", err);
+				setSubmitError("Failed to update profile");
 			}
 		},
 		onSubmitInvalid: () => {},
@@ -88,10 +121,9 @@ export default function Profile() {
 				}
 			})
 			.catch((err: any) => {
+				console.error("Failed to load profile", err);
 				if (mounted) {
-					setLoadError(getErrorMessage(err, "Failed to load profile"));
-				} else {
-					console.error("Failed to load profile", err);
+					setLoadError("Failed to load profile");
 				}
 			});
 		return () => {
@@ -106,9 +138,7 @@ export default function Profile() {
 		}
 	}, [profile, form]);
 
-	if (!profile && !loadError) {
-		return <CardSkeleton contentMaxWidth="md" loadingText="Loading profile…" />;
-	}
+	const loading = !profile && !loadError;
 
 	return (
 		<CenteredPageLayout contentMaxWidth="md" title={ROUTES.PROFILE.TITLE}>
@@ -116,44 +146,51 @@ export default function Profile() {
 				<AuthForm
 					title="Profile"
 					description="Update your account information"
+					showAlreadyLoggedIn={false}
 					error={loadError ?? submitError}
 					success={success && "Profile updated!"}
-					submit={{ text: "Save Changes", loadingText: "Saving…" }}
+					submit={{ text: "Save Changes", loadingText: "Saving…", disabled: loading }}
 					footer={{ link: ROUTES.CHANGE_PASSWORD.PATH, linkText: "Change password" }}
 				>
-					<form.AppField name="Email">
-						{(field) => <field.EmailField label="Email" disabled />}
-					</form.AppField>
-					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
-						<form.AppField name="FirstName">
-							{(field) => <field.TextField label="First name" autoComplete="given-name" />}
-						</form.AppField>
-						<form.AppField name="LastName">
-							{(field) => <field.TextField label="Last name" autoComplete="family-name" />}
-						</form.AppField>
-					</div>
-					<form.AppField name="Phone">
-						{(field) => <field.TextField label="Phone" type="tel" autoComplete="tel" />}
-					</form.AppField>
-					<form.AppField name="Street">
-						{(field) => <field.TextField label="Street" autoComplete="street-address" />}
-					</form.AppField>
-					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
-						<form.AppField name="City">
-							{(field) => <field.TextField label="City" autoComplete="address-level2" />}
-						</form.AppField>
-						<form.AppField name="State">
-							{(field) => <field.TextField label="State" autoComplete="address-level1" />}
-						</form.AppField>
-					</div>
-					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
-						<form.AppField name="PostalCode">
-							{(field) => <field.TextField label="Postal Code" autoComplete="postal-code" />}
-						</form.AppField>
-						<form.AppField name="Country">
-							{(field) => <field.TextField label="Country" autoComplete="country-name" />}
-						</form.AppField>
-					</div>
+					{loading ? (
+						<ProfileFieldsSkeleton />
+					) : (
+						<>
+							<form.AppField name="Email">
+								{(field) => <field.EmailField label="Email" disabled />}
+							</form.AppField>
+							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+								<form.AppField name="FirstName">
+									{(field) => <field.TextField label="First name" autoComplete="given-name" />}
+								</form.AppField>
+								<form.AppField name="LastName">
+									{(field) => <field.TextField label="Last name" autoComplete="family-name" />}
+								</form.AppField>
+							</div>
+							<form.AppField name="Phone">
+								{(field) => <field.TextField label="Phone" type="tel" autoComplete="tel" />}
+							</form.AppField>
+							<form.AppField name="Street">
+								{(field) => <field.TextField label="Street" autoComplete="street-address" />}
+							</form.AppField>
+							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+								<form.AppField name="City">
+									{(field) => <field.TextField label="City" autoComplete="address-level2" />}
+								</form.AppField>
+								<form.AppField name="State">
+									{(field) => <field.TextField label="State" autoComplete="address-level1" />}
+								</form.AppField>
+							</div>
+							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+								<form.AppField name="PostalCode">
+									{(field) => <field.TextField label="Postal Code" autoComplete="postal-code" />}
+								</form.AppField>
+								<form.AppField name="Country">
+									{(field) => <field.TextField label="Country" autoComplete="country-name" />}
+								</form.AppField>
+							</div>
+						</>
+					)}
 				</AuthForm>
 			</form.AppForm>
 		</CenteredPageLayout>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Register.tsx

@@ -4,10 +4,10 @@ import { z } from "zod";
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { emailSchema, passwordSchema, getStartUrl, type AuthResponse } from "../authHelpers";
-import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+import { ApiError, handleApiResponse } from "../utils/helpers";
 
 const registerSchema = z
 	.object({
@@ -26,7 +26,7 @@ const registerSchema = z
 export default function Register() {
 	const navigate = useNavigate();
 	const [searchParams] = useSearchParams();
-	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitError, setSubmitError] = useState<React.ReactNode>(null);
 
 	const form = useAppForm({
 		defaultValues: {
@@ -56,7 +56,7 @@ export default function Register() {
 						Accept: "application/json",
 					},
 				});
-				const result = await handleApiResponse<AuthResponse>(response, "Registration failed");
+				const result = await handleApiResponse<AuthResponse>(response);
 				if (result?.redirectUrl) {
 					// Hard navigate to the URL which logs the new user in
 					window.location.replace(result.redirectUrl);
@@ -65,7 +65,18 @@ export default function Register() {
 					navigate(ROUTES.LOGIN.PATH, { replace: true });
 				}
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Registration failed"));
+				console.error("Registration failed", err);
+				if (err instanceof ApiError) {
+					setSubmitError(
+						<ul>
+							{err.errors.map((e, i) => (
+								<li key={i}>{e}</li>
+							))}
+						</ul>,
+					);
+				} else {
+					setSubmitError("Registration failed");
+				}
 			}
 		},
 		onSubmitInvalid: () => {},

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/ResetPassword.tsx

@@ -5,16 +5,16 @@ import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { StatusAlert } from "../../../components/alerts/status-alert";
 import { useAppForm } from "../hooks/form";
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { newPasswordSchema } from "../authHelpers";
-import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+import { ApiError, handleApiResponse } from "../utils/helpers";
 
 export default function ResetPassword() {
 	const [searchParams] = useSearchParams();
 	const token = searchParams.get("token");
 	const [success, setSuccess] = useState(false);
-	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitError, setSubmitError] = useState<React.ReactNode>(null);
 
 	const form = useAppForm({
 		defaultValues: { newPassword: "", confirmPassword: "" },
@@ -34,12 +34,27 @@ export default function ResetPassword() {
 						Accept: "application/json",
 					},
 				});
-				await handleApiResponse(response, "Password reset failed");
+				await handleApiResponse(response);
 				setSuccess(true);
 				// Scroll to top of page after successful submission so user sees it
 				window.scrollTo({ top: 0, behavior: "smooth" });
 			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Password reset failed"));
+				console.error("Password reset failed", err);
+				if (err instanceof ApiError) {
+					setSubmitError(
+						err.errors.length === 1 ? (
+							err.errors[0]
+						) : (
+							<ul>
+								{err.errors.map((e, i) => (
+									<li key={i}>{e}</li>
+								))}
+							</ul>
+						),
+					);
+				} else {
+					setSubmitError("Password reset failed");
+				}
 			}
 		},
 		onSubmitInvalid: () => {},

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/utils/helpers.ts

@@ -1,29 +1,22 @@
 /**
- * MAINTAINABILITY: Robust error extraction.
- * Handles strings, objects, and standard Error instances.
- *
- * @param err - The error object (unknown type)
- * @param fallback - Fallback message if error doesn't have a message property
- * @returns The error message string
+ * Error thrown when the API returns a non-OK response with structured error messages.
+ * The `errors` array contains user-facing messages that are safe to display —
+ * backend Apex classes guarantee that system exceptions are never exposed.
  */
-export function getErrorMessage(err: unknown, fallback: string): string {
-	if (err instanceof Error) return err.message;
-	if (typeof err === "string") return err;
-	// Check if it's an object with a message property
-	if (typeof err === "object" && err !== null && "message" in err) {
-		return String((err as { message: unknown }).message);
+export class ApiError extends Error {
+	errors: string[];
+	constructor(errors: string[]) {
+		super(errors[0]);
+		this.name = "ApiError";
+		this.errors = errors;
 	}
-	return fallback;
 }
 
 /**
  * [Dev Note] Helper to parse the fetch Response.
  * It handles the distinction between success (JSON) and failure (throwing Error).
  */
-export async function handleApiResponse<T = unknown>(
-	response: Response,
-	fallbackError: string,
-): Promise<T> {
+export async function handleApiResponse<T = unknown>(response: Response): Promise<T> {
 	// 1. Robustness: Handle 204 No Content gracefully
 	if (response.status === 204) {
 		return {} as T;
@@ -41,9 +34,11 @@ export async function handleApiResponse<T = unknown>(
 	}
 
 	if (!response.ok) {
-		// [Dev Note] Throwing here allows the calling component to catch and
-		// display the error via getErrorMessage()
-		throw new Error(parseApiResponseError(data, fallbackError));
+		console.error("API request failed", data);
+		if (data?.errors?.length) {
+			throw new ApiError(data.errors);
+		}
+		throw new Error("An unexpected error occurred");
 	}
 
 	return data as T;
@@ -87,35 +82,3 @@ export function flattenGraphQLRecord<T>(
 		]),
 	) as T;
 }
-
-/**
- * [Dev Note] Salesforce APIs may return errors as an array or a single object.
- * This helper standardizes the extraction of the error message string.
- *
- * @param data - The response data.
- * @param fallbackError - Fallback error message if response doesn't have a message property
- * @returns The error message string
- */
-function parseApiResponseError(
-	data: any,
-	fallbackError: string = "An unknown error occurred",
-): string {
-	if (data?.message) {
-		return data.message;
-	}
-	if (data?.error) {
-		return data.error;
-	}
-	if (data?.errors && Array.isArray(data.errors) && data.errors.length > 0) {
-		return data.errors.join(" ") || fallbackError;
-	}
-	if (Array.isArray(data) && data.length > 0) {
-		return (
-			data
-				.map((e) => e?.message)
-				.filter(Boolean)
-				.join(" ") || fallbackError
-		);
-	}
-	return fallbackError;
-}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/api/graphqlClient.ts

@@ -1,28 +1,28 @@
 /**
- * Thin GraphQL client: createDataSDK + data.graphql with centralized error handling.
- * Use with gql-tagged queries and generated operation types for type-safe calls.
+ * Thin GraphQL client: createDataSDK + sdk.graphql.query with centralized
+ * error handling. Use with gql-tagged queries and generated operation types
+ * for type-safe calls.
  */
-import { createDataSDK } from '@salesforce/sdk-data';
+import { createDataSDK } from '@salesforce/platform-sdk';
 
 export async function executeGraphQL<TData, TVariables>(
   query: string,
   variables?: TVariables
 ): Promise<TData> {
   const data = await createDataSDK();
-  // SDK types graphql() first param as string; at runtime it may accept gql DocumentNode too
-  const response = await data.graphql?.<TData, TVariables>({
-    query,
-    variables,
+  const result = await data.graphql!.query<TData, TVariables>({
+    query: query,
+    variables: variables,
   });
 
-  if (!response) {
-    throw new Error('GraphQL response is undefined');
+  if (result.errors?.length) {
+    const msg = result.errors.map(e => e.message).join('; ');
+    throw new Error(`GraphQL Error: ${msg}`);
   }
 
-  if (response?.errors?.length) {
-    const msg = response.errors.map(e => e.message).join('; ');
-    throw new Error(`GraphQL Error: ${msg}`);
+  if (result.data == null) {
+    throw new Error('GraphQL response data is null');
   }
 
-  return response.data;
+  return result.data;
 }

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/components/alerts/status-alert.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon } from 'lucide-react';
 import { Alert, AlertDescription } from '../../components/ui/alert';
 import { useId } from 'react';
 
@@ -8,6 +8,7 @@ const statusAlertVariants = cva('', {
     variant: {
       error: '',
       success: '',
+      info: 'text-blue-600 *:[svg]:text-current *:data-[slot=alert-description]:text-blue-600/90',
     },
   },
   defaultVariants: {
@@ -18,11 +19,11 @@ const statusAlertVariants = cva('', {
 interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
   children?: React.ReactNode;
   /** Alert variant type. @default "error" */
-  variant?: 'error' | 'success';
+  variant?: 'error' | 'success' | 'info';
 }
 
 /**
- * Status alert component for displaying error or success messages.
+ * Status alert component for displaying error, success, or info messages.
  * Returns null if no children are provided.
  */
 export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
@@ -31,6 +32,12 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
 
   const isError = variant === 'error';
 
+  const icon = {
+    error: <AlertCircleIcon aria-hidden="true" />,
+    success: <CheckCircle2Icon aria-hidden="true" />,
+    info: <InfoIcon aria-hidden="true" />,
+  }[variant];
+
   return (
     <Alert
       variant={isError ? 'destructive' : 'default'}
@@ -38,11 +45,7 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
       aria-describedby={descriptionId}
       role={isError ? 'alert' : 'status'}
     >
-      {isError ? (
-        <AlertCircleIcon aria-hidden="true" />
-      ) : (
-        <CheckCircle2Icon aria-hidden="true" />
-      )}
+      {icon}
       <AlertDescription id={descriptionId}>{children}</AlertDescription>
     </Alert>
   );

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground/70 placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/hooks/useAsyncData.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseAsyncDataResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Runs an async fetcher on mount and whenever `deps` change.
+ * Returns the loading/error/data state. Does not cache — every call
+ * to the fetcher hits the source directly.
+ *
+ * A cleanup flag prevents state updates if the component unmounts
+ * or deps change before the fetch completes (avoids React warnings
+ * and stale updates from out-of-order responses).
+ */
+export function useAsyncData<T>(
+  fetcher: () => Promise<T>,
+  deps: React.DependencyList
+): UseAsyncDataResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [generation, setGeneration] = useState(0);
+
+  const fetcherRef = useRef(fetcher);
+  useEffect(() => {
+    fetcherRef.current = fetcher;
+  });
+
+  // Detect dep changes during render to reset loading state and bump generation
+  const [prevDeps, setPrevDeps] = useState(deps);
+  if (
+    deps.length !== prevDeps.length ||
+    deps.some((d, i) => d !== prevDeps[i])
+  ) {
+    setPrevDeps(deps);
+    setGeneration(g => g + 1);
+    if (!loading) setLoading(true);
+    if (error !== null) setError(null);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetcherRef
+      .current()
+      .then(result => {
+        if (!cancelled) setData(result);
+      })
+      .catch(err => {
+        console.error(err);
+        if (!cancelled)
+          setError(err instanceof Error ? err.message : 'An error occurred');
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [generation]);
+
+  return { data, loading, error };
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/pages/AccountObjectDetailPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useParams, useNavigate } from "react-router";
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 import { AlertCircle, ChevronDown, ChevronRight, FileQuestion } from "lucide-react";
 import GET_ACCOUNT_DETAIL from "../api/account/query/getAccountDetail.graphql?raw";
 import type {
@@ -22,7 +22,7 @@ import {
 } from "../components/ui/collapsible";
 import { Separator } from "../components/ui/separator";
 import { Skeleton } from "../components/ui/skeleton";
-import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
+import { useAsyncData } from "../hooks/useAsyncData";
 import { ObjectBreadcrumb } from "../features/object-search/components/ObjectBreadcrumb";
 
 type AccountNode = NonNullable<
@@ -33,16 +33,16 @@ type AccountNode = NonNullable<
 
 async function fetchAccountDetail(recordId: string): Promise<AccountNode | null | undefined> {
 	const data = await createDataSDK();
-	const response = await data.graphql?.<GetAccountDetailQuery, GetAccountDetailQueryVariables>({
+	const result = await data.graphql!.query<GetAccountDetailQuery, GetAccountDetailQueryVariables>({
 		query: GET_ACCOUNT_DETAIL,
 		variables: { id: recordId },
 	});
 
-	if (response?.errors?.length) {
-		throw new Error(response.errors.map((e) => e.message).join("; "));
+	if (result.errors?.length) {
+		throw new Error(result.errors.map((e) => e.message).join("; "));
 	}
 
-	return response?.data?.uiapi?.query?.Account?.edges?.[0]?.node;
+	return result.data?.uiapi?.query?.Account?.edges?.[0]?.node;
 }
 
 export default function AccountObjectDetail() {
@@ -53,9 +53,7 @@ export default function AccountObjectDetail() {
 		data: account,
 		loading,
 		error,
-	} = useCachedAsyncData(() => fetchAccountDetail(recordId!), [recordId], {
-		key: `account:${recordId}`,
-	});
+	} = useAsyncData(() => fetchAccountDetail(recordId!), [recordId]);
 
 	return (
 		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">