Skip to content

Commit

Permalink
Update documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
djhi committed May 21, 2024
1 parent 488841a commit ac6bbeb
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 8 deletions.
34 changes: 34 additions & 0 deletions docs/Upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -1310,6 +1310,40 @@ The `data-generator-retail` package has been updated to provide types for all it

React-admin no longer supports ([deprecated React PropTypes](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings)). We encourage you to switch to TypeScript to type component props.

### Mutation Middlewares No Longer Receive The Mutation Options

Mutations middlewares no longer receive the mutation options:

```diff
import * as React from 'react';
import {
useRegisterMutationMiddleware,
CreateParams,
- MutateOptions,
CreateMutationFunction
} from 'react-admin';

const MyComponent = () => {
const createMiddleware = async (
resource: string,
params: CreateParams,
- options: MutateOptions,
next: CreateMutationFunction
) => {
// Do something before the mutation

// Call the next middleware
- await next(resource, params, options);
+ await next(resource, params);

// Do something after the mutation
}
const memoizedMiddleWare = React.useCallback(createMiddleware, []);
useRegisterMutationMiddleware(memoizedMiddleWare);
// ...
}
```

## Upgrading to v4

If you are on react-admin v3, follow the [Upgrading to v4](https://marmelab.com/react-admin/doc/4.16/Upgrade.html) guide before upgrading to v5.
13 changes: 5 additions & 8 deletions docs/useRegisterMutationMiddleware.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,19 @@ import * as React from 'react';
import {
useRegisterMutationMiddleware,
CreateParams,
MutateOptions,
CreateMutationFunction
} from 'react-admin';

const MyComponent = () => {
const createMiddleware = async (
resource: string,
params: CreateParams,
options: MutateOptions,
next: CreateMutationFunction
) => {
// Do something before the mutation

// Call the next middleware
await next(resource, params, options);
await next(resource, params);

// Do something after the mutation
}
Expand All @@ -56,7 +54,7 @@ Then, render that component as a descendent of the page controller component (`<

React-admin will wrap each call to the `dataProvider.create()` mutation with the `createMiddleware` function as long as the `MyComponent` component is mounted.

`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.
`useRegisterMutationMiddleware` unregister 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.

## Parameters

Expand All @@ -65,11 +63,11 @@ React-admin will wrap each call to the `dataProvider.create()` mutation with the
A middleware function must have the following signature:

```jsx
const middlware = async (resource, params, options, next) => {
const middlware = async (resource, params, next) => {
// Do something before the mutation

// Call the next middleware
await next(resource, params, options);
await next(resource, params);

// Do something after the mutation
}
Expand Down Expand Up @@ -97,13 +95,12 @@ const ThumbnailInput = () => {
const middleware = useCallback(async (
resource,
params,
options,
next
) => {
const b64 = await convertFileToBase64(params.data.thumbnail);
// Update the parameters that will be sent to the dataProvider call
const newParams = { ...params, data: { ...data, thumbnail: b64 } };
await next(resource, newParams, options);
await next(resource, newParams);
}, []);
useRegisterMutationMiddleware(middleware);

Expand Down

0 comments on commit ac6bbeb

Please sign in to comment.