Skip to content

Switch useOcForm from React Hook Form to TanStack Form - #25

Open
esitarz wants to merge 5 commits into
ordercloud-api:mainfrom
esitarz:feat/tanstack-form
Open

esitarz wants to merge 5 commits into
ordercloud-api:mainfrom
esitarz:feat/tanstack-form

Conversation

@esitarz

@esitarz esitarz commented Sep 28, 2026 •

Copy link
Copy Markdown
Collaborator

Breaks useOcForm for #13. It returns { form, resourceSchema, parseValues } from @tanstack/react-form v1, validated with Zod. Save parseValues(), not raw form state. React stays ^18.3.1. ordercloud-javascript-sdk stays ^11.1.0. react-hook-form, @hookform/resolvers, and yup are gone.

Empty numbers and null booleans are omitted. OrderCloud rejects Active: null and QuantityMultiplier: 0 (minimum is 1). A number the user entered still has to meet minimum, and an integer rejects a decimal before the request is sent. A PUT of only { ID, Name } clears omitted scalars such as Description and leaves an omitted Inventory object in place, so callers must submit the full parsed form.

useApiSpec now shares one OpenAPI document per base URL. getRoutingUrl no longer throws when a create screen has no route params.

npm run build and npm test (10 schema cases) pass. Live checks against Cloud Commerce sandbox Q4aM3ak2zkC7vB_NaHYV9Q (https://sandboxapi.ordercloud.io), then deleted:

  • poc/validate-marketplace.mjs: name-only create, edit after GET, nested inventory, provider and inferred xp, assignment through an active catalog, one price break.
  • poc/validate-edge-cases.mjs: 15/15 on two runs. Sparse product save, xp types, integer rejection, price-break add/remove/empty, category create, spec options (read-only on the spec body; created via POST /specs/{id}/options), variant generate with { Active: true }, promotion StartDate.
OC_ACCESS_TOKEN=... npx vite-node poc/validate-marketplace.mjs
OC_ACCESS_TOKEN=... npx vite-node poc/validate-edge-cases.mjs

Do not publish 1.0.0 yet. Accelerator Admin is still on @ordercloud/react-sdk ^0.3.0, React ^18.2.0, and React Hook Form. The only useOcForm call is apps/admin/src/components/OperationForm/index.tsx. Auth forms can stay on React Hook Form. That screen has to save parseValues().body of the loaded form before this ships.

BREAKING CHANGE: useOcForm returns { form, resourceSchema, parseValues }
instead of React Hook Form methods. Validation is Zod. The
react-hook-form and @hookform/resolvers peers are removed.
@tanstack/react-form ^1.33.5 is required.

Save parseValues(), not the raw form state. Empty numbers and null
booleans are omitted. An entered integer must be a whole number and
still has to meet the spec minimum.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant