Deprecate useMutationWithToasts and promisifyMutation

Update relay agent rules to mark both helpers as deprecated.
Replace examples with the preferred pattern: useMutation with
onCompleted/onError callbacks and useToast.

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2026-03-17 16:33:37 +01:00
parent 73d5dbb5db
commit 6c9b338ad5

View File

@@ -137,34 +137,47 @@ The `@connection(key: "...", filters: [...])` directive on the fragment tells Re
Direct Relay hook for simple cases: Direct Relay hook for simple cases:
```tsx ```tsx
const [mutate] = useMutation<VendorGraphDeleteMutation>(deleteVendorMutation); const [deleteVendor] = useMutation<VendorGraphDeleteMutation>(deleteVendorMutation);
``` ```
### `useMutationWithToasts` For mutations with user feedback, combine with `useToast` and use `onCompleted`/`onError` callbacks:
Custom wrapper that adds toast notifications on success/error:
```tsx ```tsx
const [createContact, isLoading] = useMutationWithToasts( const { toast } = useToast();
createContactMutation, const [createObligation, isCreating] = useMutation<CreateObligationMutation>(createObligationMutation);
{
successMessage: __("Contact created successfully."),
errorMessage: __("Failed to create contact"),
},
);
await createContact({ const onSubmit = (formData: FormData) => {
createObligation({
variables: { variables: {
input: { vendorId, ...cleanData }, input: { ...formData },
connections: [connectionId], connections: [connectionId],
}, },
onSuccess: () => { onCompleted() {
dialogRef.current?.close(); toast({
reset(); title: __("Success"),
description: __("Obligation created successfully"),
variant: "success",
});
}, },
}); onError(error) {
toast({
title: __("Error"),
description: formatError(__("Failed to create obligation"), error as GraphQLError),
variant: "error",
});
},
});
};
``` ```
### `useMutationWithToasts` (deprecated)
**Do not use.** Use `useMutation` combined with `useToast` instead.
### `promisifyMutation` (deprecated)
**Do not use.** Use `useMutation` with `onCompleted`/`onError` callbacks instead of wrapping in a promise.
### Store update directives ### Store update directives
Relay directives handle connection updates automatically — no manual store manipulation needed: Relay directives handle connection updates automatically — no manual store manipulation needed:
@@ -213,15 +226,24 @@ Destructive mutations (delete) are wrapped with a confirmation dialog:
```tsx ```tsx
const confirm = useConfirm(); const confirm = useConfirm();
const [deleteVendor] = useMutation<DeleteVendorMutation>(deleteVendorMutation);
return () => { return () => {
confirm( confirm(
() => () =>
promisifyMutation(mutate)({ new Promise<void>((resolve) => {
deleteVendor({
variables: { variables: {
input: { vendorId: vendor.id! }, input: { vendorId: vendor.id! },
connections: [connectionId], connections: [connectionId],
}, },
onCompleted() {
resolve();
},
onError() {
resolve();
},
});
}), }),
{ message: "Confirm deletion..." }, { message: "Confirm deletion..." },
); );