fix(dashboard): Use null instead of undefined when clearing single relation selector #4045
Conversation
…lation selector The RelationSelector component's handleRemove function was calling onChange(undefined) when clearing a single-select relation. Since undefined values don't serialize in JSON, the GraphQL API would ignore the clearing request, causing previously selected values to persist. This change uses onChange(null) instead, which properly serializes to JSON and allows the GraphQL API to clear the relation field. Closes vendurehq#4032
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis PR fixes a bug where clearing single-select relation fields passes Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/dashboard/src/lib/components/data-input/relation-input.tsx (1)
39-39: ForwardingnullfromRelationSelectorinto the form engine is aligned with the fixHandling
newValueasstring | nullhere ensures single relation fields now propagatenullback to the form engine when cleared, so the outgoing JSON/GraphQL input can explicitly set the relation field tonullinstead of omitting it. Theas string | nullassertion is reasonable givenmultiple: false, though longer term you could consider parameterizingRelationSelectoron themultipleflag to avoid these casts entirely.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/dashboard/src/lib/components/data-input/relation-input.tsx(2 hunks)packages/dashboard/src/lib/components/data-input/relation-selector.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
packages/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
packages/dashboard/src/**/*.{ts,tsx}: Use React as the UI framework for components in the dashboard package
Use TanStack Query (useQuery or useMutation) for data fetching, not Apollo Client
Import api from '@/graphql/api.js' and graphql from '@/graphql/graphql.js' for GraphQL queries and mutations
Use the api.query() pattern with graphql document when creating useQuery calls, including queryKey and staleTime configuration
Use the api.mutate() pattern with graphql document when creating useMutation calls, with onSuccess and onError handlers
Use FormFieldWrapper component for form controls instead of raw Shadcn react-hook-form components
Use @lingui/react/macro for localization with Trans component for markup and useLingui hook for programmatic strings
Set React component props objects to Readonly<> type for type safety
Files:
packages/dashboard/src/lib/components/data-input/relation-selector.tsxpackages/dashboard/src/lib/components/data-input/relation-input.tsx
packages/dashboard/src/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Use Shadcn UI & Tailwind CSS for styling and UI components in the dashboard
Files:
packages/dashboard/src/lib/components/data-input/relation-selector.tsxpackages/dashboard/src/lib/components/data-input/relation-input.tsx
🧠 Learnings (7)
📚 Learning: 2025-11-27T14:21:55.972Z
Learnt from: CR
Repo: vendure-ecommerce/vendure PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-27T14:21:55.972Z
Learning: Applies to packages/dashboard/src/**/*.{ts,tsx} : Set React component props objects to Readonly<> type for type safety
Applied to files:
packages/dashboard/src/lib/components/data-input/relation-selector.tsxpackages/dashboard/src/lib/components/data-input/relation-input.tsx
📚 Learning: 2025-11-27T14:21:55.972Z
Learnt from: CR
Repo: vendure-ecommerce/vendure PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-27T14:21:55.972Z
Learning: Applies to packages/dashboard/src/**/*.{ts,tsx} : Import api from '@/graphql/api.js' and graphql from '@/graphql/graphql.js' for GraphQL queries and mutations
Applied to files:
packages/dashboard/src/lib/components/data-input/relation-input.tsx
📚 Learning: 2025-11-27T14:21:55.972Z
Learnt from: CR
Repo: vendure-ecommerce/vendure PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-27T14:21:55.972Z
Learning: Applies to packages/dashboard/src/**/*.{ts,tsx} : Use FormFieldWrapper component for form controls instead of raw Shadcn react-hook-form components
Applied to files:
packages/dashboard/src/lib/components/data-input/relation-input.tsx
📚 Learning: 2025-11-27T14:21:55.972Z
Learnt from: CR
Repo: vendure-ecommerce/vendure PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-27T14:21:55.972Z
Learning: Applies to packages/dashboard/src/**/*.{ts,tsx} : Use React as the UI framework for components in the dashboard package
Applied to files:
packages/dashboard/src/lib/components/data-input/relation-input.tsx
📚 Learning: 2025-11-27T14:21:55.972Z
Learnt from: CR
Repo: vendure-ecommerce/vendure PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-27T14:21:55.972Z
Learning: Applies to packages/dashboard/src/**/*.{ts,tsx} : Use the api.mutate() pattern with graphql document when creating useMutation calls, with onSuccess and onError handlers
Applied to files:
packages/dashboard/src/lib/components/data-input/relation-input.tsx
📚 Learning: 2025-11-27T14:21:55.972Z
Learnt from: CR
Repo: vendure-ecommerce/vendure PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-27T14:21:55.972Z
Learning: Applies to packages/dashboard/src/**/*.{ts,tsx} : Use the api.query() pattern with graphql document when creating useQuery calls, including queryKey and staleTime configuration
Applied to files:
packages/dashboard/src/lib/components/data-input/relation-input.tsx
📚 Learning: 2025-11-26T14:08:43.342Z
Learnt from: PavanendraBaahubali
Repo: vendure-ecommerce/vendure PR: 3999
File: packages/dashboard/src/app/routes/_authenticated/_products/components/create-product-variants-dialog.tsx:133-138
Timestamp: 2025-11-26T14:08:43.342Z
Learning: The Vendure dashboard codebase uses awesome-graphql-client (not Apollo Client) for GraphQL operations. The api wrapper is located at `packages/dashboard/src/vdb/graphql/api.ts`. When mutations throw errors, the error object contains a `fieldErrors` property (an array of GraphQL error objects), not `graphQLErrors`. Access error messages via `error.fieldErrors[0].message`.
Applied to files:
packages/dashboard/src/lib/components/data-input/relation-input.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (20)
- GitHub Check: e2e tests (24.x, postgres)
- GitHub Check: e2e tests (20.x, postgres)
- GitHub Check: e2e tests (22.x, mariadb)
- GitHub Check: e2e tests (24.x, mysql)
- GitHub Check: e2e tests (22.x, sqljs)
- GitHub Check: e2e tests (20.x, mysql)
- GitHub Check: unit tests (20.x)
- GitHub Check: build (22.x)
- GitHub Check: build (24.x)
- GitHub Check: unit tests (22.x)
- GitHub Check: build (20.x)
- GitHub Check: publish_install (windows-latest, 24.x)
- GitHub Check: publish_install (macos-latest, 24.x)
- GitHub Check: publish_install (ubuntu-latest, 24.x)
- GitHub Check: publish_install (macos-latest, 22.x)
- GitHub Check: publish_install (macos-latest, 20.x)
- GitHub Check: publish_install (windows-latest, 22.x)
- GitHub Check: publish_install (ubuntu-latest, 20.x)
- GitHub Check: publish_install (ubuntu-latest, 22.x)
- GitHub Check: publish_install (windows-latest, 20.x)
🔇 Additional comments (2)
packages/dashboard/src/lib/components/data-input/relation-selector.tsx (1)
51-51: Switching clear semantics fromundefinedtonulllooks correctChanging
onChangeto acceptstring | string[] | nulland usingonChange(null)for single-select removal cleanly models an explicit “no selection” state, which will serialize asnullin JSON and allow the GraphQL API to clear the relation instead of ignoring the field. The multi-select path remainsstring[]-only, so its behavior is unchanged.Also applies to: 338-348
packages/dashboard/src/lib/components/data-input/relation-input.tsx (1)
3-3: Whitespace-only changeThis line is just formatting and has no behavioral impact.
|
Please can you explain to me what this is fixing. Please do not use any AI assistant when answering. |
2 participants
Summary
RelationSelectorcomponent to useonChange(null)instead ofonChange(undefined)when clearing a single-select relationonChangetype signature fromstring | string[] | undefinedtostring | string[] | nullSingleRelationInputto properly type the onChange callbackProblem
When clearing a single-select relation field in the Dashboard, the component was calling
onChange(undefined). Sinceundefinedvalues don't serialize in JSON, the GraphQL API would ignore the clearing request, causing previously selected values to persist on the server.Solution
Changed
onChange(undefined)toonChange(null)which properly serializes to JSON and allows the GraphQL API to receive and process the null value, effectively clearing the relation field.Files Changed
packages/dashboard/src/lib/components/data-input/relation-selector.tsx- Changed handleRemove to usenullinstead ofundefined, updated type signaturepackages/dashboard/src/lib/components/data-input/relation-input.tsx- Updated SingleRelationInput onChange typingTest Plan
Closes #4032
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.