You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CHANGELOG.md
+29Lines changed: 29 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,34 @@
1
1
# Changelog
2
2
3
+
## v4.10.2
4
+
5
+
* Fix custom redirect in pessimistic `<Edit>` or `<Create>` when using `warnWhenUnsavedChanges` ([#8882](https://github.com/marmelab/react-admin/pull/8882)) ([slax57](https://github.com/slax57))
*[Doc] Fix `<Menu.ResourceItem>` example should use the `name` prop ([#8886](https://github.com/marmelab/react-admin/pull/8886)) ([septentrion-730n](https://github.com/septentrion-730n))
8
+
*[Doc] Update DataProvider List with `ra-strapi-rest` v4 ([#8865](https://github.com/marmelab/react-admin/pull/8865)) ([nazirov91](https://github.com/nazirov91))
9
+
10
+
## v4.10.1
11
+
12
+
* Republish all packages, including the `create-react-admin` installer ([fzaninotto](https://github.com/fzaninotto))
13
+
14
+
## v4.10.0
15
+
16
+
Note: This release wasn't published to npm, use version 4.10.1 or higher.
* Add `<InfiniteList>` and `<InfinitePagination>` components ([#8781](https://github.com/marmelab/react-admin/pull/8781)) ([fzaninotto](https://github.com/fzaninotto))
20
+
* Add ability to change the sort, filter and selection of `<ArrayField>` ([#8802](https://github.com/marmelab/react-admin/pull/8802)) ([fzaninotto](https://github.com/fzaninotto))
21
+
* Add ability to configure the remove icon of `<FileInputPreview>` ([#8756](https://github.com/marmelab/react-admin/pull/8756)) ([PennyJeans](https://github.com/PennyJeans))
22
+
* Fix `<Datagrid>` does not apply `className` to its root element (minor BC) ([#8804](https://github.com/marmelab/react-admin/pull/8804)) ([slax57](https://github.com/slax57))
23
+
* Fix `useHandleCallback` sometimes causes infinite redirection loop ([#8861](https://github.com/marmelab/react-admin/pull/8861)) ([djhi](https://github.com/djhi))
24
+
* Fix `<AppBar alwaysOn>` hides sidebar menu on scroll ([#8856](https://github.com/marmelab/react-admin/pull/8856)) ([slax57](https://github.com/slax57))
25
+
* Fix `<SimpleFormIterator>` new item's fields default empty string instead of null ([#8792](https://github.com/marmelab/react-admin/pull/8792)) ([kriskw1999](https://github.com/kriskw1999))
26
+
*[Doc] Fix reference to Material UI ([#8857](https://github.com/marmelab/react-admin/pull/8857)) ([oliviertassinari](https://github.com/oliviertassinari))
27
+
*[Doc] Fix Show documentation misses the `aside` prop ([#8855](https://github.com/marmelab/react-admin/pull/8855)) ([fzaninotto](https://github.com/fzaninotto))
28
+
*[Doc] Convert GIF files to WebM ([#8767](https://github.com/marmelab/react-admin/pull/8767)) ([slax57](https://github.com/slax57))
29
+
*[TypeScript] Add some utilities to improve generics ([#8815](https://github.com/marmelab/react-admin/pull/8815)) ([IAmVisco](https://github.com/IAmVisco))
30
+
*[TypeScript] Improve `useRedirect` and `useCreatePath` types ([#8811](https://github.com/marmelab/react-admin/pull/8811)) ([djhi](https://github.com/djhi))
31
+
3
32
## v4.9.4
4
33
5
34
* Fix GraphQL data provider when using different a custom credential type ([#8847](https://github.com/marmelab/react-admin/pull/8847)) ([@rlucia](https://github.com/rlucia))
It's very common that your auth logic is so specific that you'll need to write your own `authProvider`. However, the community has built a few open-source Auth Providers that may fit your need:
`ra-realtime` provides helper functions to add real-time capabilities to an existing data provider if you use the following real-time backends:
9
+
10
+
-[Supabase](#supabase)
11
+
-[API Platform](#api-platform)
12
+
-[Mercure](#mercure)
13
+
14
+
For other backends, you'll need to write your own implementation. Check the [Writing a custom adapter](#writing-a-custom-adapter) section below for more information.
15
+
16
+
## Realtime Methods & Signature
17
+
8
18
To enable real-time features, the `dataProvider` must implement three new methods:
9
19
10
20
-`subscribe(topic, callback)`
@@ -20,7 +30,87 @@ In addition, to support the lock features, the `dataProvider` must implement 4 m
20
30
-`getLock(resource, { id, meta })`
21
31
-`getLocks(resource, { meta })`
22
32
23
-
## API-Platform Adapter
33
+
## Supabase
34
+
35
+
The `ra-realtime` package contains a function augmenting a regular (API-based) `dataProvider` with real-time methods based on the capabilities of [Supabase](https://supabase.com/docs/guides/realtime).
36
+
37
+
This adapter subscribes to [Postgres Changes](https://supabase.com/docs/guides/realtime/extensions/postgres-changes), and transforms the events into the format expected by `ra-realtime`.
**Tip:** Realtime features are not enabled in Supabase by default, you need to enable them. This can be done either from the [Replication](https://app.supabase.com/project/_/database/replication) section of your Supabase Dashboard, or by running the following SQL query with the [SQL Editor](https://app.supabase.com/project/_/sql):
80
+
81
+
```sql
82
+
begin;
83
+
84
+
-- remove the supabase_realtime publication
85
+
drop
86
+
publication if exists supabase_realtime;
87
+
88
+
-- re-create the supabase_realtime publication with no tables
Have a look at the Supabase [Replication Setup](https://supabase.com/docs/guides/realtime/extensions/postgres-changes#replication-setup) documentation section for more info.
103
+
104
+
`addRealTimeMethodsBasedOnSupabase` accepts the following parameters:
|`dataProvider`| Required |`DataProvider`| - | The base dataProvider to augment with realtime methods |
109
+
|`supabaseClient`| Required |`SupabaseClient`| - | The Supabase JS Client |
110
+
111
+
**Tip**: You may choose to sign your own tokens to customize claims that can be checked in your RLS policies. In order to use these custom tokens with `addRealTimeMethodsBasedOnSupabase`, you must pass an `apikey` field in both Realtime's `headers` and `params` when creating the `supabaseClient`. Please follow the instructions from the [Supabase documentation](https://supabase.com/docs/guides/realtime/extensions/postgres-changes#custom-tokens) for more information about how to do so.
112
+
113
+
## API-Platform
24
114
25
115
The `ra-realtime` package contains a function augmenting a regular (API-based) `dataProvider` with real-time methods based on the capabilities of [API-Platform](https://api-platform.com/). Use it as follows:
26
116
@@ -70,7 +160,7 @@ const GreetingsList = () => (
70
160
);
71
161
```
72
162
73
-
## Mercure Adapter
163
+
## Mercure
74
164
75
165
The `ra-realtime` package contains a function augmenting a regular (API-based) `dataProvider` with real-time methods based on [a Mercure hub](https://mercure.rocks/). Use it as follows:
76
166
@@ -95,7 +185,7 @@ const App = () => (
95
185
96
186
If you're using another transport for real-time messages (WebSockets, long polling, GraphQL subscriptions, etc.), you'll have to implement `subscribe`, `unsubscribe`, and `publish` yourself in your `dataProvider`. As an example, here is an implementation using a local variable, that `ra-realtime` uses in tests:
Copy file name to clipboardExpand all lines: docs/Tutorial.md
+13-54Lines changed: 13 additions & 54 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,18 +17,24 @@ Here is an overview of the result:
17
17
18
18
## Setting Up
19
19
20
-
React-admin uses React. We'll use [Vite](https://vitejs.dev/) to create an empty React app, and install the `react-admin` package:
20
+
React-admin uses React. We'll use [create-react-admin](https://github.com/marmelab/react-admin/tree/master/packages/create-react-admin) to bootstrap a new admin:
21
21
22
22
```sh
23
-
yarn create vite test-admin --template react-ts
24
-
cd test-admin/
25
-
yarn add react-admin ra-data-json-server
23
+
yarn create react-admin test-admin
24
+
```
25
+
26
+
Choose **JSON Server** as the data provider, then **None** as the auth provider. Don't add any resource for now and just press **Enter**. Finally, choose either `npm` or `yarn` and press **Enter**. Once everything is installed, enter the following commands:
27
+
28
+
```sh
29
+
cd test-admin
30
+
npm run dev
31
+
# or
26
32
yarn dev
27
33
```
28
34
29
-
You should be up and running with an empty React application on port 5173.
35
+
You should be up and running with an empty React admin application on port 5173.
30
36
31
-
**Tip**: Although this tutorial uses a TypeScript template, you can use react-admin with JavaScript if you prefer. Also, you can use [create-react-app](./CreateReactApp.md), [Next.js](./NextJs.md), [Remix](./Remix.md), or any other React framework to create your admin app. React-admin is framework-agnostic.
37
+
**Tip**: Although this tutorial uses a TypeScript template, you can use react-admin with JavaScript if you prefer. Also, you can use [Vite](https://vitejs.dev/), [create-react-app](./CreateReactApp.md), [Next.js](./NextJs.md), [Remix](./Remix.md), or any other React framework to create your admin app. React-admin is framework-agnostic.
32
38
33
39
## Using an API As Data Source
34
40
@@ -70,57 +76,10 @@ JSONPlaceholder provides endpoints for users, posts, and comments. The admin we'
70
76
71
77
## Making Contact With The API Using a Data Provider
72
78
73
-
Bootstrap the admin app by replacing the `src/App.tsx` by the following code:
**Tip:** You can also install the `Roboto` font locally by following the instructions from the [Material UI starter guide](https://mui.com/material-ui/getting-started/installation/#roboto-font).
123
-
124
83
The `<App>` component renders an `<Admin>` component, which is the root component of a react-admin application. This component expects a `dataProvider` prop - a function capable of fetching data from an API. Since there is no standard for data exchanges between computers, you will probably have to write a custom provider to connect react-admin to your own APIs - but we'll dive into Data Providers later. For now, let's take advantage of the `ra-data-json-server` data provider, which speaks the same REST dialect as JSONPlaceholder.
0 commit comments