rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename useMutation destructured vars to match graphql tagged node

Browse Source 
Replace generic names (commitMutation, commitCreate, isInFlight, etc.)
with names derived from the graphql tagged-template variable minus the
Mutation suffix. Add naming convention rule to contrib/claude/relay.md.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-20 16:18:52 +04:00
parent 465f43d359
commit de73199ff2
8 changed files with 53 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx
View File

@@ -55,7 +55,7 @@ export default function NewCookieBannerPage() {
usePageTitle(__("New Cookie Banner"));
const [commitMutation, isInFlight]
const [createCookieBanner, isCreating]
= useMutation<NewCookieBannerPageMutation>(createCookieBannerMutation);
const [name, setName] = useState("");
@@ -67,7 +67,7 @@ export default function NewCookieBannerPage() {
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
commitMutation({
createCookieBanner({
variables: {
input: {
organizationId,
@@ -162,8 +162,8 @@ export default function NewCookieBannerPage() {
</div>
</div>
<Button type="submit" disabled={isInFlight}>
{isInFlight ? __("Creating...") : __("Create Banner")}
<Button type="submit" disabled={isCreating}>
{isCreating ? __("Creating...") : __("Create Banner")}
</Button>
</form>
</Card>

12
apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx
View File

@@ -115,15 +115,15 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi
const banner = data.node;
const [commitActivate, isActivating] = useMutation<CookieBannerConfigLayoutActivateMutation>(activateMutation);
const [commitDeactivate, isDeactivating] = useMutation<CookieBannerConfigLayoutDeactivateMutation>(
const [activate, isActivating] = useMutation<CookieBannerConfigLayoutActivateMutation>(activateMutation);
const [deactivate, isDeactivating] = useMutation<CookieBannerConfigLayoutDeactivateMutation>(
deactivateMutation,
);
const [commitPublish, isPublishing] = useMutation<CookieBannerConfigLayoutPublishMutation>(publishMutation);
const [publish, isPublishing] = useMutation<CookieBannerConfigLayoutPublishMutation>(publishMutation);
const handleToggleState = () => {
if (banner.state === "ACTIVE") {
commitDeactivate({
deactivate({
variables: { input: { cookieBannerId: banner.id } },
onCompleted() {
toast({ title: __("Success"), description: __("Banner deactivated"), variant: "success" });
@@ -133,7 +133,7 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi
},
});
} else {
commitActivate({
activate({
variables: { input: { cookieBannerId: banner.id } },
onCompleted() {
toast({ title: __("Success"), description: __("Banner activated"), variant: "success" });
@@ -146,7 +146,7 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi
};
const handlePublish = () => {
commitPublish({
publish({
variables: { input: { cookieBannerId: banner.id } },
onCompleted() {
toast({ title: __("Success"), description: __("Version published"), variant: "success" });

8
apps/console/src/pages/organizations/cookie-banners/configuration/_components/BannerSettingsForm.tsx
View File

@@ -63,7 +63,7 @@ export function BannerSettingsForm({ cookieBannerKey }: BannerSettingsFormProps)
const banner = useFragment(bannerSettingsFormFragment, cookieBannerKey);
const [commitMutation, isInFlight] = useMutation<BannerSettingsFormMutation>(updateBannerMutation);
const [updateBanner, isUpdating] = useMutation<BannerSettingsFormMutation>(updateBannerMutation);
const [name, setName] = useState(banner.name);
const [origin, setOrigin] = useState(banner.origin);
@@ -74,7 +74,7 @@ export function BannerSettingsForm({ cookieBannerKey }: BannerSettingsFormProps)
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
commitMutation({
updateBanner({
variables: {
input: {
cookieBannerId: banner.id,
@@ -131,8 +131,8 @@ export function BannerSettingsForm({ cookieBannerKey }: BannerSettingsFormProps)
</div>
</div>
<Button type="submit" disabled={isInFlight}>
{isInFlight ? __("Saving...") : __("Save")}
<Button type="submit" disabled={isUpdating}>
{isUpdating ? __("Saving...") : __("Save")}
</Button>
</form>
</Card>

4
apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryDialog.tsx
View File

@@ -78,7 +78,7 @@ export function CategoryDialog({
const { __ } = useTranslate();
const { toast } = useToast();
const [commitCreate, isCreating] = useMutation<CategoryDialogCreateMutation>(createMutation);
const [create, isCreating] = useMutation<CategoryDialogCreateMutation>(createMutation);
const [name, setName] = useState("");
const [description, setDescription] = useState("");
@@ -86,7 +86,7 @@ export function CategoryDialog({
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
commitCreate({
create({
variables: {
input: {
cookieBannerId,

14
apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx
View File

@@ -102,13 +102,13 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
const connectionId = banner.categories.__id;
const categories = banner.categories.edges.map(e => e.node);
const [commitDelete] = useMutation<CategoryListDeleteMutation>(deleteCategoryMutation);
const [commitUpdate] = useMutation<CategoryListUpdateMutation>(updateCategoryMutation);
const [deleteCategory] = useMutation<CategoryListDeleteMutation>(deleteCategoryMutation);
const [updateCategory] = useMutation<CategoryListUpdateMutation>(updateCategoryMutation);
const sorted = [...categories].sort((a, b) => a.rank - b.rank);
const handleDelete = (categoryId: string) => {
commitDelete({
deleteCategory({
variables: {
input: { cookieCategoryId: categoryId },
connections: [connectionId],
@@ -126,13 +126,13 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
if (index === 0) return;
const current = sorted[index];
const above = sorted[index - 1];
commitUpdate({
updateCategory({
variables: { input: { cookieCategoryId: current.id, rank: above.rank } },
onError(error) {
toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "error" });
},
});
commitUpdate({
updateCategory({
variables: { input: { cookieCategoryId: above.id, rank: current.rank } },
onError(error) {
toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "error" });
@@ -144,13 +144,13 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
if (index >= sorted.length - 1) return;
const current = sorted[index];
const below = sorted[index + 1];
commitUpdate({
updateCategory({
variables: { input: { cookieCategoryId: current.id, rank: below.rank } },
onError(error) {
toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "error" });
},
});
commitUpdate({
updateCategory({
variables: { input: { cookieCategoryId: below.id, rank: current.rank } },
onError(error) {
toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "error" });

4
apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx
View File

@@ -82,7 +82,7 @@ export function CookieDialog({ categories, onOpenChange }: CookieDialogProps) {
const { toast } = useToast();
const dialogRef = useDialogRef();
const [commitUpdate, isUpdating] = useMutation<CookieDialogUpdateMutation>(updateCategoryMutation);
const [updateCategory, isUpdating] = useMutation<CookieDialogUpdateMutation>(updateCategoryMutation);
const [categoryId, setCategoryId] = useState(categories[0]?.id ?? "");
const [name, setName] = useState("");
@@ -101,7 +101,7 @@ export function CookieDialog({ categories, onOpenChange }: CookieDialogProps) {
description: c.description,
}));
commitUpdate({
updateCategory({
variables: {
input: {
cookieCategoryId: categoryId,

4
apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx
View File

@@ -95,7 +95,7 @@ export function CategorySection({ categoryKey }: CategorySectionProps) {
const { __ } = useTranslate();
const { toast } = useToast();
const [commitUpdate, isUpdating]
const [updateCategory, isUpdating]
= useMutation<CategorySectionUpdateMutation>(updateCategoryMutation);
const [isEditingCategory, setIsEditingCategory] = useState(false);
@@ -116,7 +116,7 @@ export function CategorySection({ categoryKey }: CategorySectionProps) {
input: Record<string, unknown>,
onSuccess?: () => void,
) => {
commitUpdate({
updateCategory({
variables: {
input: {
cookieCategoryId: category.id,

27
contrib/claude/relay.md
View File

@@ -264,7 +264,32 @@ The `@connection(key: "...", filters: [...])` directive on the fragment tells Re
### `useMutation`
Direct Relay hook for simple cases:
Direct Relay hook for simple cases.
#### Naming convention
Name the destructured result of `useMutation` after the **graphql tagged-template variable**, dropping the `Mutation` suffix:
| Tagged node variable | Commit function | In-flight boolean |
|----------------------|-----------------|-------------------|
| `createCookieBannerMutation` | `createCookieBanner` | `isCreating` or `isCreatingCookieBanner` |
| `updateBannerMutation` | `updateBanner` | `isUpdating` |
| `deleteCategoryMutation` | `deleteCategory` | `isDeleting` |
| `activateMutation` | `activate` | `isActivating` |
**Never** use generic names like `commitMutation`, `commit`, or `isInFlight`.
```tsx
// Bad
const [commitMutation, isInFlight] = useMutation<Mutation>(createCookieBannerMutation);
commitMutation({ variables: { ... } });
// Good
const [createCookieBanner, isCreating] = useMutation<Mutation>(createCookieBannerMutation);
createCookieBanner({ variables: { ... } });
```
#### Examples
```tsx
const [deleteVendor] = useMutation<VendorGraphDeleteMutation>(deleteVendorMutation);