Upgrade SDK to v10.24

force-app/main/react-recipes/uiBundles/reactRecipes/package.json

@@ -19,8 +19,8 @@
   "dependencies": {
     "@salesforce-ux/design-system": "2.29.0",
     "@salesforce/design-system-react": "^0.10.65",
-    "@salesforce/sdk-data": "^1.134.4",
-    "@salesforce/ui-bundle": "^1.134.4",
+    "@salesforce/platform-sdk": "^10.24.0",
+    "@salesforce/ui-bundle": "^10.24.0",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -30,7 +30,7 @@
     "react": "^19.2.0",
     "react-day-picker": "^9.14.0",
     "react-dom": "^19.2.0",
-    "react-router": "^7.15.1",
+    "react-router": "^7.10.1",
     "shadcn": "^3.8.5",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
@@ -50,7 +50,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-ui-bundle": "^1.134.4",
+    "@salesforce/vite-plugin-ui-bundle": "^10.24.0",
     "@shikijs/twoslash": "^4.0.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
@@ -75,7 +75,7 @@
     "shiki": "^4.0.2",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
-    "vite": "^7.3.5",
+    "vite": "^7.2.4",
     "vite-plugin-graphql-codegen": "^3.6.3",
     "vitest": "^4.0.17",
     "vitest-axe": "^1.0.0-pre.5"

force-app/main/react-recipes/uiBundles/reactRecipes/src/api/account.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { createDataSDK, gql } from '@salesforce/sdk-data';
+import { createDataSDK, gql } from '@salesforce/platform-sdk';
 import type {
   GetFirstAccountQuery,
   GetAccountsQuery,
@@ -65,13 +65,13 @@ export function useFirstAccount(): {
 
 export async function getFirstAccount(): Promise<AccountNode | undefined> {
   const sdk = await createDataSDK();
-  const result = await sdk.graphql?.<GetFirstAccountQuery>({ query: GET_FIRST_ACCOUNT });
+  const result = await sdk.graphql?.query<GetFirstAccountQuery>({ query: GET_FIRST_ACCOUNT });
 
   if (result?.errors?.length) {
     throw new Error(result.errors.map(e => e.message).join('; '));
   }
 
-  return result?.data.uiapi?.query?.Account?.edges?.[0]?.node ?? undefined;
+  return result?.data?.uiapi?.query?.Account?.edges?.[0]?.node ?? undefined;
 }
 
 const GET_ACCOUNTS = gql`
@@ -106,13 +106,13 @@ export type Account = NonNullable<AccountListNode>;
 
 export async function getAccounts(): Promise<Account[]> {
   const sdk = await createDataSDK();
-  const result = await sdk.graphql?.<GetAccountsQuery>({ query: GET_ACCOUNTS });
+  const result = await sdk.graphql?.query<GetAccountsQuery>({ query: GET_ACCOUNTS });
 
   if (result?.errors?.length) {
     throw new Error(result.errors.map(e => e.message).join('; '));
   }
 
-  return (result?.data.uiapi?.query?.Account?.edges ?? [])
+  return (result?.data?.uiapi?.query?.Account?.edges ?? [])
     .map(edge => edge?.node)
     .filter((node): node is Account => node != null);
 }

force-app/main/react-recipes/uiBundles/reactRecipes/src/api/accounts.ts

@@ -1,4 +1,4 @@
-import { createDataSDK, gql } from '@salesforce/sdk-data';
+import { createDataSDK, gql } from '@salesforce/platform-sdk';
 import { GetAccountsWithContactsQuery } from './graphql-operations-types';
 
 const GET_ACCOUNTS_WITH_CONTACTS = gql`
@@ -56,15 +56,15 @@ export async function getAccountsWithContacts(): Promise<
   AccountWithContacts[]
 > {
   const sdk = await createDataSDK();
-  const result = await sdk.graphql?.<GetAccountsWithContactsQuery>({
+  const result = await sdk.graphql?.query<GetAccountsWithContactsQuery>({
     query: GET_ACCOUNTS_WITH_CONTACTS,
   });
 
   if (result?.errors?.length) {
     throw new Error(result.errors.map(e => e.message).join('; '));
   }
 
-  return (result?.data.uiapi?.query?.Account?.edges ?? [])
+  return (result?.data?.uiapi?.query?.Account?.edges ?? [])
     .map(edge => edge?.node)
     .filter((node): node is AccountWithContacts => node != null);
 }

force-app/main/react-recipes/uiBundles/reactRecipes/src/api/contacts.ts

@@ -1,4 +1,4 @@
-import { createDataSDK, gql } from '@salesforce/sdk-data';
+import { createDataSDK, gql } from '@salesforce/platform-sdk';
 import { GetContactsQuery } from './graphql-operations-types';
 
 const GET_CONTACTS = gql`
@@ -45,13 +45,13 @@ export type Contact = ContactNode;
 
 export async function getContacts(): Promise<(ContactNode | undefined)[]> {
   const sdk = await createDataSDK();
-  const result = await sdk.graphql?.<GetContactsQuery>({ query: GET_CONTACTS });
+  const result = await sdk.graphql?.query<GetContactsQuery>({ query: GET_CONTACTS });
 
   if (result?.errors?.length) {
     throw new Error(result.errors.map(e => e.message).join('; '));
   }
 
-  const connection = result?.data.uiapi?.query?.Contact;
+  const connection = result?.data?.uiapi?.query?.Contact;
 
   return (connection?.edges ?? [])
     .map(edge => edge?.node)

force-app/main/react-recipes/uiBundles/reactRecipes/src/api/graphql-operations-types.ts

@@ -21,6 +21,7 @@ export type Scalars = {
   EncryptedString: { input: string; output: string; }
   /** Can be set to an ID or a Reference to the result of another mutation operation. */
   IdOrRef: { input: string; output: string; }
+  JSON: { input: string; output: string; }
   Latitude: { input: number | string; output: number; }
   /** A 64-bit signed integer */
   Long: { input: number; output: number; }

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/error-handling/GraphqlErrors.test.tsx

@@ -9,11 +9,11 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { type Mock } from 'vitest';
-import { createDataSDK } from '@salesforce/sdk-data';
+import { createDataSDK } from '@salesforce/platform-sdk';
 import { axe } from 'vitest-axe';
 import GraphqlErrors from './GraphqlErrors';
 
-vi.mock('@salesforce/sdk-data', () => ({
+vi.mock('@salesforce/platform-sdk', () => ({
   createDataSDK: vi.fn(),
   gql: (strings: TemplateStringsArray) => strings.join(''),
 }));
@@ -22,7 +22,7 @@ describe('GraphqlErrors', () => {
   const mockGraphql = vi.fn();
 
   beforeEach(() => {
-    (createDataSDK as Mock).mockResolvedValue({ graphql: mockGraphql });
+    (createDataSDK as Mock).mockResolvedValue({ graphql: { query: mockGraphql, mutate: mockGraphql } });
   });
 
   afterEach(() => {

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/error-handling/GraphqlErrors.tsx

@@ -12,7 +12,7 @@
  * @see ErrorBoundaryRecipe — catching render-time JavaScript errors
  */
 import { useState } from 'react';
-import { createDataSDK, gql } from '@salesforce/sdk-data';
+import { createDataSDK, gql } from '@salesforce/platform-sdk';
 import { Button } from '@/components/ui/button';
 
 // This query intentionally asks for a field that doesn't exist on Account.
@@ -71,7 +71,7 @@ export default function GraphqlErrors() {
 
     try {
       const sdk = await createDataSDK();
-      const result = await sdk.graphql?.({ query });
+      const result = await sdk.graphql?.query({ query });
 
       // Layer 1: result.errors[] — query-level errors (bad fields, auth, etc.)
       if (result?.errors?.length) {

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/error-handling/LoadingErrorEmpty.test.tsx

@@ -13,8 +13,8 @@ import LoadingErrorEmpty from './LoadingErrorEmpty';
 
 const mockGraphql = vi.fn();
 
-vi.mock('@salesforce/sdk-data', () => ({
-  createDataSDK: vi.fn(() => Promise.resolve({ graphql: mockGraphql })),
+vi.mock('@salesforce/platform-sdk', () => ({
+  createDataSDK: vi.fn(() => Promise.resolve({ graphql: { query: mockGraphql, mutate: mockGraphql } })),
   gql: (strings: TemplateStringsArray) => strings.join(''),
 }));
 

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/error-handling/LoadingErrorEmpty.tsx

@@ -13,7 +13,7 @@
  * @see GraphqlErrors — inspecting GraphQL error objects
  */
 import { useEffect, useState } from 'react';
-import { createDataSDK, gql } from '@salesforce/sdk-data';
+import { createDataSDK, gql } from '@salesforce/platform-sdk';
 import Skeleton from '@/components/recipe/Skeleton';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
@@ -89,7 +89,7 @@ export default function LoadingErrorEmpty() {
   function fetchContacts() {
     const run = async () => {
       const sdk = await createDataSDK();
-      const result = await sdk.graphql?.<QueryResponse>({ query: QUERY });
+      const result = await sdk.graphql?.query<QueryResponse>({ query: QUERY });
 
       if (result?.errors?.length) {
         throw new Error(

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/hello/BindingAccountName.test.tsx

@@ -6,11 +6,11 @@
  */
 import { render, screen } from '@testing-library/react';
 import type { Mock } from 'vitest';
-import { createDataSDK } from '@salesforce/sdk-data';
+import { createDataSDK } from '@salesforce/platform-sdk';
 import { axe } from 'vitest-axe';
 import BindingAccountName from './BindingAccountName';
 
-vi.mock('@salesforce/sdk-data', () => ({
+vi.mock('@salesforce/platform-sdk', () => ({
   createDataSDK: vi.fn(),
   gql: (strings: TemplateStringsArray) => strings.join(''),
 }));
@@ -32,7 +32,7 @@ describe('BindingAccountName', () => {
   const mockGraphql = vi.fn();
 
   beforeEach(() => {
-    (createDataSDK as Mock).mockResolvedValue({ graphql: mockGraphql });
+    (createDataSDK as Mock).mockResolvedValue({ graphql: { query: mockGraphql, mutate: mockGraphql } });
   });
 
   afterEach(() => {

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/hello/BindingAccountName.tsx

@@ -13,7 +13,7 @@
  * @see ConditionalStatus — conditional rendering with picklist data
  */
 import { useEffect, useState } from 'react';
-import { createDataSDK, gql } from '@salesforce/sdk-data';
+import { createDataSDK, gql } from '@salesforce/platform-sdk';
 
 // Every scalar field in UIAPI GraphQL is wrapped in { value }.
 // This is different from standard GraphQL where fields are plain scalars.
@@ -55,7 +55,7 @@ export default function BindingAccountName() {
   useEffect(() => {
     const fetchName = async () => {
       const sdk = await createDataSDK();
-      const result = await sdk.graphql?.<QueryResponse>({ query: QUERY });
+      const result = await sdk.graphql?.query<QueryResponse>({ query: QUERY });
 
       if (result?.errors?.length) {
         throw new Error(

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/hello/ChildToParent.test.tsx

@@ -8,11 +8,11 @@
 import { render, screen } from '@testing-library/react';
 import { type Mock } from 'vitest';
 import userEvent from '@testing-library/user-event';
-import { createDataSDK } from '@salesforce/sdk-data';
+import { createDataSDK } from '@salesforce/platform-sdk';
 import { axe } from 'vitest-axe';
 import ChildToParent from './ChildToParent';
 
-vi.mock('@salesforce/sdk-data', () => ({
+vi.mock('@salesforce/platform-sdk', () => ({
   createDataSDK: vi.fn(),
   gql: (strings: TemplateStringsArray) => strings.join(''),
 }));
@@ -36,7 +36,7 @@ describe('ChildToParent', () => {
   const mockGraphql = vi.fn();
 
   beforeEach(() => {
-    (createDataSDK as Mock).mockResolvedValue({ graphql: mockGraphql });
+    (createDataSDK as Mock).mockResolvedValue({ graphql: { query: mockGraphql, mutate: mockGraphql } });
   });
 
   afterEach(() => {

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/hello/ChildToParent.tsx

@@ -12,7 +12,7 @@
  * @see StateManagement — sharing state between sibling components
  */
 import { useEffect, useState } from 'react';
-import { createDataSDK, gql } from '@salesforce/sdk-data';
+import { createDataSDK, gql } from '@salesforce/platform-sdk';
 
 // Industry picklist values from the Account standard object
 const INDUSTRIES = [
@@ -74,7 +74,7 @@ export default function ChildToParent() {
 
     const fetchAccounts = async () => {
       const sdk = await createDataSDK();
-      const result = await sdk.graphql?.<QueryResponse>({
+      const result = await sdk.graphql?.query<QueryResponse>({
         query: QUERY,
         variables: { industry },
       });

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/hello/ConditionalStatus.test.tsx

@@ -6,11 +6,11 @@
  */
 import { render, screen } from '@testing-library/react';
 import { type Mock } from 'vitest';
-import { createDataSDK } from '@salesforce/sdk-data';
+import { createDataSDK } from '@salesforce/platform-sdk';
 import { axe } from 'vitest-axe';
 import ConditionalStatus from './ConditionalStatus';
 
-vi.mock('@salesforce/sdk-data', () => ({
+vi.mock('@salesforce/platform-sdk', () => ({
   createDataSDK: vi.fn(),
   gql: (strings: TemplateStringsArray) => strings.join(''),
 }));
@@ -40,7 +40,7 @@ describe('ConditionalStatus', () => {
   const mockGraphql = vi.fn();
 
   beforeEach(() => {
-    (createDataSDK as Mock).mockResolvedValue({ graphql: mockGraphql });
+    (createDataSDK as Mock).mockResolvedValue({ graphql: { query: mockGraphql, mutate: mockGraphql } });
   });
 
   afterEach(() => {

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/hello/ConditionalStatus.tsx

@@ -11,7 +11,7 @@
  * @see ListOfAccounts — rendering a list of records with .map()
  */
 import { useEffect, useState } from 'react';
-import { createDataSDK, gql } from '@salesforce/sdk-data';
+import { createDataSDK, gql } from '@salesforce/platform-sdk';
 import { Badge } from '@/components/ui/badge';
 
 const QUERY = gql`
@@ -64,7 +64,7 @@ export default function ConditionalStatus() {
   useEffect(() => {
     const fetchAccount = async () => {
       const sdk = await createDataSDK();
-      const result = await sdk.graphql?.<QueryResponse>({ query: QUERY });
+      const result = await sdk.graphql?.query<QueryResponse>({ query: QUERY });
 
       if (result?.errors?.length) {
         throw new Error(

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/hello/LifecycleFetch.test.tsx

@@ -8,11 +8,11 @@
 import { render, screen } from '@testing-library/react';
 import { type Mock } from 'vitest';
 import userEvent from '@testing-library/user-event';
-import { createDataSDK } from '@salesforce/sdk-data';
+import { createDataSDK } from '@salesforce/platform-sdk';
 import { axe } from 'vitest-axe';
 import LifecycleFetch from './LifecycleFetch';
 
-vi.mock('@salesforce/sdk-data', () => ({
+vi.mock('@salesforce/platform-sdk', () => ({
   createDataSDK: vi.fn(),
   gql: (strings: TemplateStringsArray) => strings.join(''),
 }));
@@ -42,7 +42,7 @@ describe('LifecycleFetch', () => {
   const mockGraphql = vi.fn();
 
   beforeEach(() => {
-    (createDataSDK as Mock).mockResolvedValue({ graphql: mockGraphql });
+    (createDataSDK as Mock).mockResolvedValue({ graphql: { query: mockGraphql, mutate: mockGraphql } });
   });
 
   afterEach(() => {

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/hello/LifecycleFetch.tsx

@@ -14,7 +14,7 @@
  * @see SingleRecord — querying a single record with GraphQL
  */
 import { useEffect, useState } from 'react';
-import { createDataSDK, gql } from '@salesforce/sdk-data';
+import { createDataSDK, gql } from '@salesforce/platform-sdk';
 import { Button } from '@/components/ui/button';
 
 const QUERY = gql`
@@ -84,7 +84,7 @@ function ContactFetcher() {
 
     const fetchContact = async () => {
       const sdk = await createDataSDK();
-      const result = await sdk.graphql?.<QueryResponse>({ query: QUERY });
+      const result = await sdk.graphql?.query<QueryResponse>({ query: QUERY });
 
       if (stale) return; // component was unmounted while fetching
 

force-app/main/react-recipes/uiBundles/reactRecipes/src/recipes/hello/ListOfAccounts.test.tsx

@@ -1,17 +1,17 @@
 /**
- * The vi.mock() call below intercepts the @salesforce/sdk-data module for the
+ * The vi.mock() call below intercepts the @salesforce/platform-sdk module for the
  * entire test file. In LWC Jest the equivalent is registering a wire adapter
  * mock — here there is no wire adapter, so a plain module mock is enough.
  * The mock data objects mirror the real UIAPI GraphQL response shape so the
  * component's data-mapping code is exercised, not bypassed.
  */
 import { render, screen } from '@testing-library/react';
 import { type Mock } from 'vitest';
-import { createDataSDK } from '@salesforce/sdk-data';
+import { createDataSDK } from '@salesforce/platform-sdk';
 import { axe } from 'vitest-axe';
 import ListOfAccounts from './ListOfAccounts';
 
-vi.mock('@salesforce/sdk-data', () => ({
+vi.mock('@salesforce/platform-sdk', () => ({
   createDataSDK: vi.fn(),
   gql: (strings: TemplateStringsArray) => strings.join(''),
 }));
@@ -48,7 +48,7 @@ describe('ListOfAccounts', () => {
   const mockGraphql = vi.fn();
 
   beforeEach(() => {
-    (createDataSDK as Mock).mockResolvedValue({ graphql: mockGraphql });
+    (createDataSDK as Mock).mockResolvedValue({ graphql: { query: mockGraphql, mutate: mockGraphql } });
   });
 
   afterEach(() => {