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:
@@ -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..." },
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user