Skip to content

Commit

Permalink
Update to react admin v4 (#73)
Browse files Browse the repository at this point in the history 
* Bump react and react-admin versions

* Migrate hooks

* Migrate components and fix lint

* Fix build

* Fix AmplifyFilter

* Fix Amplify fields

* Update version and README
  • Loading branch information
@MrHertal
MrHertal authored Jun 25, 2022
1 parent db8fc5f commit 3e3774c
Show file tree
Hide file tree
Showing 11 changed files with 22,552 additions and 14,858 deletions.
123 changes: 78 additions & 45 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Demo source code is here: <https://github.com/MrHertal/react-admin-amplify-demo>
## How does it work

The data provider accepts GraphQL queries and mutations as parameters.
Queries and mutations are the one generated by the [Amplify CLI](https://docs.amplify.aws/cli/graphql-transformer/codegen).
Queries and mutations are the one generated by the [Amplify CLI](https://docs.amplify.aws/cli/graphql/client-code-generation/).

Based on the resource that is required, the data provider is able to choose the right query and to fetch the data.
GraphQL queries are executed with the [Amplify GraphQL client](https://docs.amplify.aws/lib/graphqlapi/query-data/q/platform/js).
Expand All @@ -31,15 +31,15 @@ On the other hand, the auth provider uses the [Amplify Auth library](https://doc

Please note that your Amplify backend, meaning the `amplify/` folder containing your GraphQL schema, can be located in a different repo than the react-admin one.

Starting from a [react-admin](https://marmelab.com/react-admin/Tutorial.html) project, install the Amplify libraries:
Starting from a [react-admin](https://marmelab.com/react-admin/Tutorial.html) project, install the Amplify library:

```sh
npm install @aws-amplify/core @aws-amplify/api @aws-amplify/auth @aws-amplify/storage
npm install aws-amplify
```

You will need the configuration file `aws-exports.js` of your Amplify backend, so that react-admin can connect to your API.

Finally, you will need the `queries.js` and `mutations.js` files generated by the [Amplify CLI](https://docs.amplify.aws/cli/graphql-transformer/codegen).
Finally, you will need the `queries.js` and `mutations.js` files generated by the [Amplify CLI](https://docs.amplify.aws/cli/graphql/client-code-generation/).

## Installation

Expand All @@ -53,8 +53,7 @@ Simplest way to set things up is to use the `AmplifyAdmin` component:

```jsx
// in App.js
import { Amplify } from "@aws-amplify/core";
import React from "react";
import { Amplify } from "aws-amplify";
import { Resource } from "react-admin";
import { AmplifyAdmin } from "react-admin-amplify";
import awsExports from "./aws-exports";
Expand All @@ -69,7 +68,8 @@ function App() {
operations={{ queries, mutations }} // Pass the queries and mutations
options={{ authGroups: ["admin"] }} // Pass the options
>
<Resource name="orders" />{/* Set the resources as you would do within Admin component */}
<Resource name="orders" />
{/* Set the resources as you would do within Admin component */}
</AmplifyAdmin>
);
}
Expand All @@ -83,8 +83,7 @@ Code above is the equivalent of:

```jsx
// in App.js
import { Amplify } from "@aws-amplify/core";
import React from "react";
import { Amplify } from "aws-amplify";
import { Admin, Resource } from "react-admin";
import { buildAuthProvider, buildDataProvider } from "react-admin-amplify";
import awsExports from "./aws-exports";
Expand Down Expand Up @@ -145,7 +144,7 @@ This section details some features of the library but also some limitations.

Total count is not supported by Amplify, see <https://github.com/aws-amplify/amplify-cli/issues/1865>.

That means that react-admin default pagination does not suit well. I suggest implementing a prev/next pagination like the one described in react-admin [documentation](https://marmelab.com/react-admin/List.html#pagination).
That means that react-admin default pagination does not suit well. I suggest implementing a prev/next pagination like the one described in react-admin [documentation](https://marmelab.com/react-admin/ListTutorial.html#building-a-custom-pagination).

### Filter

Expand All @@ -154,8 +153,7 @@ In order to use react-admin filters, you will have to correctly set [@key direct
Let's say you have a GraphQL schema that defines a type `Order`:

```graphql
type Order @model
{
type Order @model {
id: ID!
customerID: ID!
accountRepresentativeID: ID!
Expand Down Expand Up @@ -204,9 +202,13 @@ Now you want to filter orders by product. You may think about passing a `$filter
You need to configure index structures in order to do that, using the `@key` directive:

```graphql
type Order @model
@key(name: "byProduct", fields: ["productID", "id"], queryField: "ordersByProduct")
{
type Order
@model
@key(
name: "byProduct"
fields: ["productID", "id"]
queryField: "ordersByProduct"
) {
id: ID!
customerID: ID!
accountRepresentativeID: ID!
Expand Down Expand Up @@ -259,7 +261,12 @@ Finally in your react-admin app, set the filter this way:
```jsx
const OrderFilter = (props) => (
<Filter {...props}>
<TextInput source="ordersByProduct.productID" label="Product id" alwaysOn resettable />
<TextInput
source="ordersByProduct.productID"
label="Product id"
alwaysOn
resettable
/>
</Filter>
);
```
Expand All @@ -273,10 +280,18 @@ Things become more complex when you want to add several filters.
Let's say that you want to add another filter to the order resource. You want to be able to filter orders by customer and by date:

```graphql
type Order @model
@key(name: "byProduct", fields: ["productID", "id"], queryField: "ordersByProduct")
@key(name: "byCustomerByDate", fields: ["customerID", "date"], queryField: "ordersByCustomerByDate")
{
type Order
@model
@key(
name: "byProduct"
fields: ["productID", "id"]
queryField: "ordersByProduct"
)
@key(
name: "byCustomerByDate"
fields: ["customerID", "date"]
queryField: "ordersByCustomerByDate"
) {
id: ID!
customerID: ID!
accountRepresentativeID: ID!
Expand All @@ -292,8 +307,18 @@ In your react-admin app, filters are set this way:
```jsx
const OrderFilter = (props) => (
<Filter {...props}>
<TextInput source="ordersByProduct.productID" label="Product id" alwaysOn resettable />
<TextInput source="ordersByCustomerByDate.customerID" label="Customer id" alwaysOn resettable />
<TextInput
source="ordersByProduct.productID"
label="Product id"
alwaysOn
resettable
/>
<TextInput
source="ordersByCustomerByDate.customerID"
label="Customer id"
alwaysOn
resettable
/>
<DateInput source="ordersByCustomerByDate.date.eq" label="Date" alwaysOn />
</Filter>
);
Expand All @@ -311,8 +336,18 @@ import { AmplifyFilter } from "react-admin-amplify";

const OrderFilter = (props) => (
<AmplifyFilter {...props}>
<TextInput source="ordersByProduct.productID" label="Product id" alwaysOn resettable />
<TextInput source="ordersByCustomerByDate.customerID" label="Customer id" alwaysOn resettable />
<TextInput
source="ordersByProduct.productID"
label="Product id"
alwaysOn
resettable
/>
<TextInput
source="ordersByCustomerByDate.customerID"
label="Customer id"
alwaysOn
resettable
/>
<DateInput source="ordersByCustomerByDate.date.eq" label="Date" alwaysOn />
</AmplifyFilter>
);
Expand All @@ -330,10 +365,18 @@ Similarly to filters, sorting is based on [@key directives](https://docs.amplify
Let's look at `Order` schema again:

```graphql
type Order @model
@key(name: "byProduct", fields: ["productID", "id"], queryField: "ordersByProduct")
@key(name: "byCustomerByDate", fields: ["customerID", "date"], queryField: "ordersByCustomerByDate")
{
type Order
@model
@key(
name: "byProduct"
fields: ["productID", "id"]
queryField: "ordersByProduct"
)
@key(
name: "byCustomerByDate"
fields: ["customerID", "date"]
queryField: "ordersByCustomerByDate"
) {
id: ID!
customerID: ID!
accountRepresentativeID: ID!
Expand Down Expand Up @@ -391,18 +434,11 @@ type S3Object {

`S3Object` is mandatory for the data provider to properly work.

Install the storage module if it's not already done:

```sh
npm install @aws-amplify/storage
```

You can then pass the S3 bucket and region to the data provider:

```jsx
// in App.js
import { Amplify } from "@aws-amplify/core";
import React from "react";
import { Amplify } from "aws-amplify";
import { Resource } from "react-admin";
import { AmplifyAdmin } from "react-admin-amplify";
import awsExports from "./aws-exports";
Expand Down Expand Up @@ -432,7 +468,7 @@ export default App;
#### Amplify inputs

```jsx
import { AmplifyFileInput, AmplifyImageInput} from "react-admin-amplify";
import { AmplifyFileInput, AmplifyImageInput } from "react-admin-amplify";

// ...

Expand All @@ -449,17 +485,16 @@ export const UserCreate = (props) => (
</SimpleForm>
</Create>
);
);
```

`AmplifyImageInput` and `AmplifyFileInput` components accept same props as [ImageInput](https://marmelab.com/react-admin/Inputs.html#imageinput) and [FileInput](https://marmelab.com/react-admin/Inputs.html#fileinput).
`AmplifyImageInput` and `AmplifyFileInput` components accept same props as [ImageInput](https://marmelab.com/react-admin/ImageInput.html) and [FileInput](https://marmelab.com/react-admin/FileInput.html).

An additional prop `storageOptions` is available and is passed to [Storage.put](https://docs.amplify.aws/lib/storage/upload/q/platform/js).

#### Amplify fields

```jsx
import { AmplifyFileField, AmplifyImageField} from "react-admin-amplify";
import { AmplifyFileField, AmplifyImageField } from "react-admin-amplify";

// ...

Expand All @@ -477,7 +512,7 @@ export const UserShow = (props) => (
);
```

`AmplifyImageField` and `AmplifyFileField` components accept same props as [ImageField](https://marmelab.com/react-admin/Fields.html#imagefield) and [FileField](https://marmelab.com/react-admin/Fields.html#filefield).
`AmplifyImageField` and `AmplifyFileField` components accept same props as [ImageField](https://marmelab.com/react-admin/ImageField.html) and [FileField](https://marmelab.com/react-admin/FileField.html).

An additional prop `storageOptions` is available and is passed to [Storage.get](https://docs.amplify.aws/lib/storage/download/q/platform/js).

Expand All @@ -493,8 +528,7 @@ Then you have to set the data provider option `enableAdminQueries`:

```jsx
// in App.js
import { Amplify } from "@aws-amplify/core";
import React from "react";
import { Amplify } from "aws-amplify";
import { Resource } from "react-admin";
import { AmplifyAdmin } from "react-admin-amplify";
import awsExports from "./aws-exports";
Expand Down Expand Up @@ -526,8 +560,7 @@ You can then add these two resources:

```jsx
// in App.js
import { Amplify } from "@aws-amplify/core";
import React from "react";
import { Amplify } from "aws-amplify";
import { Resource } from "react-admin";
import {
AmplifyAdmin,
Expand Down
Loading

0 comments on commit 3e3774c

Please sign in to comment.