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")); usePageTitle(__("New Cookie Banner"));
const [commitMutation, isInFlight] const [createCookieBanner, isCreating]
= useMutation<NewCookieBannerPageMutation>(createCookieBannerMutation); = useMutation<NewCookieBannerPageMutation>(createCookieBannerMutation);
const [name, setName] = useState(""); const [name, setName] = useState("");
@@ -67,7 +67,7 @@ export default function NewCookieBannerPage() {
const handleSubmit = (e: FormEvent<HTMLFormElement>) => { const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
commitMutation({ createCookieBanner({
variables: { variables: {
input: { input: {
organizationId, organizationId,
@@ -162,8 +162,8 @@ export default function NewCookieBannerPage() {
</div> </div>
</div> </div>
<Button type="submit" disabled={isInFlight}> <Button type="submit" disabled={isCreating}>
{isInFlight ? __("Creating...") : __("Create Banner")} {isCreating ? __("Creating...") : __("Create Banner")}
</Button> </Button>
</form> </form>
</Card> </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 banner = data.node;
const [commitActivate, isActivating] = useMutation<CookieBannerConfigLayoutActivateMutation>(activateMutation); const [activate, isActivating] = useMutation<CookieBannerConfigLayoutActivateMutation>(activateMutation);
const [commitDeactivate, isDeactivating] = useMutation<CookieBannerConfigLayoutDeactivateMutation>( const [deactivate, isDeactivating] = useMutation<CookieBannerConfigLayoutDeactivateMutation>(
deactivateMutation, deactivateMutation,
); );
const [commitPublish, isPublishing] = useMutation<CookieBannerConfigLayoutPublishMutation>(publishMutation); const [publish, isPublishing] = useMutation<CookieBannerConfigLayoutPublishMutation>(publishMutation);
const handleToggleState = () => { const handleToggleState = () => {
if (banner.state === "ACTIVE") { if (banner.state === "ACTIVE") {
commitDeactivate({ deactivate({
variables: { input: { cookieBannerId: banner.id } }, variables: { input: { cookieBannerId: banner.id } },
onCompleted() { onCompleted() {
toast({ title: __("Success"), description: __("Banner deactivated"), variant: "success" }); toast({ title: __("Success"), description: __("Banner deactivated"), variant: "success" });
@@ -133,7 +133,7 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi
}, },
}); });
} else { } else {
commitActivate({ activate({
variables: { input: { cookieBannerId: banner.id } }, variables: { input: { cookieBannerId: banner.id } },
onCompleted() { onCompleted() {
toast({ title: __("Success"), description: __("Banner activated"), variant: "success" }); toast({ title: __("Success"), description: __("Banner activated"), variant: "success" });
@@ -146,7 +146,7 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi
}; };
const handlePublish = () => { const handlePublish = () => {
commitPublish({ publish({
variables: { input: { cookieBannerId: banner.id } }, variables: { input: { cookieBannerId: banner.id } },
onCompleted() { onCompleted() {
toast({ title: __("Success"), description: __("Version published"), variant: "success" }); 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 banner = useFragment(bannerSettingsFormFragment, cookieBannerKey);
const [commitMutation, isInFlight] = useMutation<BannerSettingsFormMutation>(updateBannerMutation); const [updateBanner, isUpdating] = useMutation<BannerSettingsFormMutation>(updateBannerMutation);
const [name, setName] = useState(banner.name); const [name, setName] = useState(banner.name);
const [origin, setOrigin] = useState(banner.origin); const [origin, setOrigin] = useState(banner.origin);
@@ -74,7 +74,7 @@ export function BannerSettingsForm({ cookieBannerKey }: BannerSettingsFormProps)
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
commitMutation({ updateBanner({
variables: { variables: {
input: { input: {
cookieBannerId: banner.id, cookieBannerId: banner.id,
@@ -131,8 +131,8 @@ export function BannerSettingsForm({ cookieBannerKey }: BannerSettingsFormProps)
</div> </div>
</div> </div>
<Button type="submit" disabled={isInFlight}> <Button type="submit" disabled={isUpdating}>
{isInFlight ? __("Saving...") : __("Save")} {isUpdating ? __("Saving...") : __("Save")}
</Button> </Button>
</form> </form>
</Card> </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 { __ } = useTranslate();
const { toast } = useToast(); const { toast } = useToast();
const [commitCreate, isCreating] = useMutation<CategoryDialogCreateMutation>(createMutation); const [create, isCreating] = useMutation<CategoryDialogCreateMutation>(createMutation);
const [name, setName] = useState(""); const [name, setName] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
@@ -86,7 +86,7 @@ export function CategoryDialog({
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
commitCreate({ create({
variables: { variables: {
input: { input: {
cookieBannerId, 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 connectionId = banner.categories.__id;
const categories = banner.categories.edges.map(e => e.node); const categories = banner.categories.edges.map(e => e.node);
const [commitDelete] = useMutation<CategoryListDeleteMutation>(deleteCategoryMutation); const [deleteCategory] = useMutation<CategoryListDeleteMutation>(deleteCategoryMutation);
const [commitUpdate] = useMutation<CategoryListUpdateMutation>(updateCategoryMutation); const [updateCategory] = useMutation<CategoryListUpdateMutation>(updateCategoryMutation);
const sorted = [...categories].sort((a, b) => a.rank - b.rank); const sorted = [...categories].sort((a, b) => a.rank - b.rank);
const handleDelete = (categoryId: string) => { const handleDelete = (categoryId: string) => {
commitDelete({ deleteCategory({
variables: { variables: {
input: { cookieCategoryId: categoryId }, input: { cookieCategoryId: categoryId },
connections: [connectionId], connections: [connectionId],
@@ -126,13 +126,13 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
if (index === 0) return; if (index === 0) return;
const current = sorted[index]; const current = sorted[index];
const above = sorted[index - 1]; const above = sorted[index - 1];
commitUpdate({ updateCategory({
variables: { input: { cookieCategoryId: current.id, rank: above.rank } }, variables: { input: { cookieCategoryId: current.id, rank: above.rank } },
onError(error) { onError(error) {
toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "error" }); toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "error" });
}, },
}); });
commitUpdate({ updateCategory({
variables: { input: { cookieCategoryId: above.id, rank: current.rank } }, variables: { input: { cookieCategoryId: above.id, rank: current.rank } },
onError(error) { onError(error) {
toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "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; if (index >= sorted.length - 1) return;
const current = sorted[index]; const current = sorted[index];
const below = sorted[index + 1]; const below = sorted[index + 1];
commitUpdate({ updateCategory({
variables: { input: { cookieCategoryId: current.id, rank: below.rank } }, variables: { input: { cookieCategoryId: current.id, rank: below.rank } },
onError(error) { onError(error) {
toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "error" }); toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "error" });
}, },
}); });
commitUpdate({ updateCategory({
variables: { input: { cookieCategoryId: below.id, rank: current.rank } }, variables: { input: { cookieCategoryId: below.id, rank: current.rank } },
onError(error) { onError(error) {
toast({ title: __("Error"), description: formatError(__("Failed to reorder"), error as GraphQLError), variant: "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 { toast } = useToast();
const dialogRef = useDialogRef(); const dialogRef = useDialogRef();
const [commitUpdate, isUpdating] = useMutation<CookieDialogUpdateMutation>(updateCategoryMutation); const [updateCategory, isUpdating] = useMutation<CookieDialogUpdateMutation>(updateCategoryMutation);
const [categoryId, setCategoryId] = useState(categories[0]?.id ?? ""); const [categoryId, setCategoryId] = useState(categories[0]?.id ?? "");
const [name, setName] = useState(""); const [name, setName] = useState("");
@@ -101,7 +101,7 @@ export function CookieDialog({ categories, onOpenChange }: CookieDialogProps) {
description: c.description, description: c.description,
})); }));
commitUpdate({ updateCategory({
variables: { variables: {
input: { input: {
cookieCategoryId: categoryId, 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 { __ } = useTranslate();
const { toast } = useToast(); const { toast } = useToast();
const [commitUpdate, isUpdating] const [updateCategory, isUpdating]
= useMutation<CategorySectionUpdateMutation>(updateCategoryMutation); = useMutation<CategorySectionUpdateMutation>(updateCategoryMutation);
const [isEditingCategory, setIsEditingCategory] = useState(false); const [isEditingCategory, setIsEditingCategory] = useState(false);
@@ -116,7 +116,7 @@ export function CategorySection({ categoryKey }: CategorySectionProps) {
input: Record<string, unknown>, input: Record<string, unknown>,
onSuccess?: () => void, onSuccess?: () => void,
) => { ) => {
commitUpdate({ updateCategory({
variables: { variables: {
input: { input: {
cookieCategoryId: category.id, 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` ### `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 ```tsx
const [deleteVendor] = useMutation<VendorGraphDeleteMutation>(deleteVendorMutation); const [deleteVendor] = useMutation<VendorGraphDeleteMutation>(deleteVendorMutation);