diff --git a/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx b/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx index 0cba2e4ba..75df1c25b 100644 --- a/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx @@ -55,7 +55,7 @@ export default function NewCookieBannerPage() { usePageTitle(__("New Cookie Banner")); - const [commitMutation, isInFlight] + const [createCookieBanner, isCreating] = useMutation(createCookieBannerMutation); const [name, setName] = useState(""); @@ -67,7 +67,7 @@ export default function NewCookieBannerPage() { const handleSubmit = (e: FormEvent) => { e.preventDefault(); - commitMutation({ + createCookieBanner({ variables: { input: { organizationId, @@ -162,8 +162,8 @@ export default function NewCookieBannerPage() { - diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx index 1e894b005..d3120295f 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx @@ -115,15 +115,15 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi const banner = data.node; - const [commitActivate, isActivating] = useMutation(activateMutation); - const [commitDeactivate, isDeactivating] = useMutation( + const [activate, isActivating] = useMutation(activateMutation); + const [deactivate, isDeactivating] = useMutation( deactivateMutation, ); - const [commitPublish, isPublishing] = useMutation(publishMutation); + const [publish, isPublishing] = useMutation(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" }); diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/BannerSettingsForm.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/BannerSettingsForm.tsx index 2bd86df32..c41b834cc 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/BannerSettingsForm.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/BannerSettingsForm.tsx @@ -63,7 +63,7 @@ export function BannerSettingsForm({ cookieBannerKey }: BannerSettingsFormProps) const banner = useFragment(bannerSettingsFormFragment, cookieBannerKey); - const [commitMutation, isInFlight] = useMutation(updateBannerMutation); + const [updateBanner, isUpdating] = useMutation(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) - diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryDialog.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryDialog.tsx index 467ec829a..adb278f84 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryDialog.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryDialog.tsx @@ -78,7 +78,7 @@ export function CategoryDialog({ const { __ } = useTranslate(); const { toast } = useToast(); - const [commitCreate, isCreating] = useMutation(createMutation); + const [create, isCreating] = useMutation(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, diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx index 911c04918..5cdfe25d7 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx @@ -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(deleteCategoryMutation); - const [commitUpdate] = useMutation(updateCategoryMutation); + const [deleteCategory] = useMutation(deleteCategoryMutation); + const [updateCategory] = useMutation(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" }); diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx index 08afe1cf0..8af67e360 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx @@ -82,7 +82,7 @@ export function CookieDialog({ categories, onOpenChange }: CookieDialogProps) { const { toast } = useToast(); const dialogRef = useDialogRef(); - const [commitUpdate, isUpdating] = useMutation(updateCategoryMutation); + const [updateCategory, isUpdating] = useMutation(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, diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx index 89ae979a4..7afd9e9cb 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx @@ -95,7 +95,7 @@ export function CategorySection({ categoryKey }: CategorySectionProps) { const { __ } = useTranslate(); const { toast } = useToast(); - const [commitUpdate, isUpdating] + const [updateCategory, isUpdating] = useMutation(updateCategoryMutation); const [isEditingCategory, setIsEditingCategory] = useState(false); @@ -116,7 +116,7 @@ export function CategorySection({ categoryKey }: CategorySectionProps) { input: Record, onSuccess?: () => void, ) => { - commitUpdate({ + updateCategory({ variables: { input: { cookieCategoryId: category.id, diff --git a/contrib/claude/relay.md b/contrib/claude/relay.md index 8f38dfd35..4c196ee73 100644 --- a/contrib/claude/relay.md +++ b/contrib/claude/relay.md @@ -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(createCookieBannerMutation); +commitMutation({ variables: { ... } }); + +// Good +const [createCookieBanner, isCreating] = useMutation(createCookieBannerMutation); +createCookieBanner({ variables: { ... } }); +``` + +#### Examples ```tsx const [deleteVendor] = useMutation(deleteVendorMutation);