|
| 1 | +--- |
| 2 | +layout: default |
| 3 | +title: "useRegisterMutationMiddleware" |
| 4 | +--- |
| 5 | + |
| 6 | +# `useRegisterMutationMiddleware` |
| 7 | + |
| 8 | +React-admin lets you hook into the save logic of the forms in Creation and Edition pages using middleware functions. These functions "wrap" the main mutation (`dataProvider.create()` in a Creation page, `dataProvider.update()` in an Edition page), so you can add you own code to be executed before and after it. This allows you to perform various advanced form use cases, such as: |
| 9 | + |
| 10 | +- transforming the data passed to the main mutation, |
| 11 | +- updating the mutation parameters before it is called, |
| 12 | +- creating, updating or deleting related data, |
| 13 | +- adding performances logs, |
| 14 | +- etc. |
| 15 | + |
| 16 | +Middleware functions have access to the same parameters as the underlying mutation (`create` or `update`), and to a `next` function to call the next function in the mutation lifecycle. |
| 17 | + |
| 18 | +`useRegisterMutationMiddleware` allows to register a mutation middleware function for the current form. |
| 19 | + |
| 20 | +## Usage |
| 21 | + |
| 22 | +Define a middleware function, then use the hook to register it. |
| 23 | + |
| 24 | +For example, a middleware for the create mutation looks like the following: |
| 25 | + |
| 26 | +```tsx |
| 27 | +import * as React from 'react'; |
| 28 | +import { |
| 29 | + useRegisterMutationMiddleware, |
| 30 | + CreateParams, |
| 31 | + MutateOptions, |
| 32 | + CreateMutationFunction |
| 33 | +} from 'react-admin'; |
| 34 | + |
| 35 | +const MyComponent = () => { |
| 36 | + const createMiddleware = async ( |
| 37 | + resource: string, |
| 38 | + params: CreateParams, |
| 39 | + options: MutateOptions, |
| 40 | + next: CreateMutationFunction |
| 41 | + ) => { |
| 42 | + // Do something before the mutation |
| 43 | + |
| 44 | + // Call the next middleware |
| 45 | + await next(resource, params, options); |
| 46 | + |
| 47 | + // Do something after the mutation |
| 48 | + } |
| 49 | + const memoizedMiddleWare = React.useCallback(createMiddleware, []); |
| 50 | + useRegisterMutationMiddleware(memoizedMiddleWare); |
| 51 | + // ... |
| 52 | +} |
| 53 | +``` |
| 54 | + |
| 55 | +Then, render that component as a descendent of the page controller component (`<Create>` or `<Edit>`). |
| 56 | + |
| 57 | +React-admin will wrap each call to the `dataProvider.create()` mutation with the `createMiddleware` function as long as the `MyComponent` component is mounted. |
| 58 | + |
| 59 | +`useRegisterMutationMiddleware` unregisters the middleware function when the component unmounts. For this to work correctly, you must provide a stable reference to the function by wrapping it in a `useCallback` hook for instance. |
| 60 | + |
| 61 | +## Params |
| 62 | + |
| 63 | +`useRegisterMutationMiddleware` expects a single parameter: a middleware function. |
| 64 | + |
| 65 | +A middleware function must have the following signature: |
| 66 | + |
| 67 | +```jsx |
| 68 | +const middlware = async (resource, params, options, next) => { |
| 69 | + // Do something before the mutation |
| 70 | + |
| 71 | + // Call the next middleware |
| 72 | + await next(resource, params, options); |
| 73 | + |
| 74 | + // Do something after the mutation |
| 75 | +} |
| 76 | +``` |
| 77 | + |
| 78 | +The `params` type depends on the mutation: |
| 79 | + |
| 80 | +- For a `create` middleware, `{ data, meta }` |
| 81 | +- For an `update` middleware, `{ id, data, previousData }` |
| 82 | + |
| 83 | +## Example |
| 84 | + |
| 85 | +The following example shows a custom `<ImageInput>` that converts its images to base64 on submit, and updates the main resource record to use the base64 versions of those images: |
| 86 | + |
| 87 | +```tsx |
| 88 | +import { useCallback } from 'react'; |
| 89 | +import { |
| 90 | + CreateMutationFunction, |
| 91 | + ImageInput, |
| 92 | + Middleware, |
| 93 | + useRegisterMutationMiddleware |
| 94 | +} from 'react-admin'; |
| 95 | + |
| 96 | +const ThumbnailInput = () => { |
| 97 | + const middleware = useCallback(async ( |
| 98 | + resource, |
| 99 | + params, |
| 100 | + options, |
| 101 | + next |
| 102 | + ) => { |
| 103 | + const b64 = await convertFileToBase64(params.data.thumbnail); |
| 104 | + // Update the parameters that will be sent to the dataProvider call |
| 105 | + const newParams = { ...params, data: { ...data, thumbnail: b64 } }; |
| 106 | + await next(resource, newParams, options); |
| 107 | + }, []); |
| 108 | + useRegisterMutationMiddleware(middleware); |
| 109 | + |
| 110 | + return <ImageInput source="thumbnail" />; |
| 111 | +}; |
| 112 | + |
| 113 | +const convertFileToBase64 = (file: { |
| 114 | + rawFile: File; |
| 115 | + src: string; |
| 116 | + title: string; |
| 117 | +}) => |
| 118 | + new Promise((resolve, reject) => { |
| 119 | + // If the file src is a blob url, it must be converted to b64. |
| 120 | + if (file.src.startsWith('blob:')) { |
| 121 | + const reader = new FileReader(); |
| 122 | + reader.onload = () => resolve(reader.result); |
| 123 | + reader.onerror = reject; |
| 124 | + |
| 125 | + reader.readAsDataURL(file.rawFile); |
| 126 | + } else { |
| 127 | + resolve(file.src); |
| 128 | + } |
| 129 | + }); |
| 130 | +``` |
| 131 | + |
| 132 | +Use the `<ThumbnailInput>` component in a creation form just like any regular Input component: |
| 133 | + |
| 134 | +```jsx |
| 135 | +const PostCreate = () => ( |
| 136 | + <Create> |
| 137 | + <SimpleForm> |
| 138 | + <TextInput source="title" /> |
| 139 | + <TextInput source="body" multiline /> |
| 140 | + <ThumbnailInput /> |
| 141 | + </SimpleForm> |
| 142 | + </Create> |
| 143 | +); |
| 144 | + |
| 145 | +With this middleware, given the following form values: |
| 146 | + |
| 147 | +```json |
| 148 | +{ |
| 149 | + "data": { |
| 150 | + "thumbnail": { |
| 151 | + "rawFile": { |
| 152 | + "path": "avatar.jpg" |
| 153 | + }, |
| 154 | + "src": "blob:http://localhost:9010/c925dc18-5918-4782-8087-b2464896b8f9", |
| 155 | + "title": "avatar.jpg" |
| 156 | + } |
| 157 | + } |
| 158 | +} |
| 159 | +``` |
| 160 | + |
| 161 | +The dataProvider `create` function will be called with: |
| 162 | + |
| 163 | +```json |
| 164 | +{ |
| 165 | + "data": { |
| 166 | + "thumbnail": { |
| 167 | + "title":"avatar.jpg", |
| 168 | + "src":"data:image/jpeg;base64,..." |
| 169 | + } |
| 170 | + } |
| 171 | +} |
| 172 | +``` |
0 commit comments