srosset81
115 lines
3.3 KiB
Markdown
115 lines
3.3 KiB
Markdown
# Refine providers for NextGraph
|
|
|
|
Data, auth and live providers that can be used in any [Refine](https://refine.dev/core/) application.
|
|
|
|
## Usage
|
|
|
|
> For a quick overview, have a look at our [example app](./examples/antd-app/).
|
|
|
|
Refine relies on the concept of "resources" (which are data types) to manage your application in a structured way. On the other side, NextGraph identifies data types using [ShEx shapes](https://shex.io/) which are transformed into "shape types" using [its own tool](https://docs.nextgraph.org/en/reference/shex-orm/). So naturally our data provider needs to receive a list of shape types in order to identify resources.
|
|
|
|
### 1. Define your shapes
|
|
|
|
Create a `/shapes` directory and, within it, two subdirectories: `/shex` and `/orm`
|
|
|
|
Within the `/shapes/shex` directory, create a ShEx file with the shape of the data you want to handle.
|
|
|
|
Here's an example of a shape for an ActivityStreams `Note`, saved under the `note.shex` filename:
|
|
|
|
```shex
|
|
PREFIX as: <https://www.w3.org/ns/activitystreams#>
|
|
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
|
|
|
|
as:Note {
|
|
a [as:Note] ;
|
|
as:title xsd:string ;
|
|
as:content xsd:string ? ;
|
|
}
|
|
```
|
|
|
|
### 2. Pass the shape types to the data provider
|
|
|
|
Go to the `/shapes` directory and run the following command:
|
|
|
|
```bash
|
|
npx rdf-orm build --input ./shex --output ./orm
|
|
```
|
|
|
|
If you created a `note.shex` file, this will generate three files in the `/orm` subdirectory:
|
|
|
|
- `note.schema.ts`
|
|
- `note.shapeTypes.ts`
|
|
- `note.typings.ts`
|
|
|
|
Now within the `shapes` directory, create a `shapeTypes.ts` like this:
|
|
|
|
```ts
|
|
import { ShapeTypes } from "@ng-org/refine-providers";
|
|
import { NoteShapeType } from "./orm/note.shapeTypes";
|
|
|
|
const shapeTypes : ShapeTypes = {
|
|
notes: NoteShapeType
|
|
}
|
|
|
|
export default shapeTypes;
|
|
```
|
|
|
|
### 3. Configure the providers
|
|
|
|
Add the providers to Refine. The live provider is optional, but it will allow you to sync data
|
|
if several users are working on the same data. See the example app for how to handle this correctly
|
|
in the edit and view pages.
|
|
|
|
```tsx
|
|
import { authProvider, dataProvider, liveProvider } from "@ng-org/refine-providers";
|
|
import shapeTypes from "./shapes/shapeTypes";
|
|
|
|
const ngAuthProvider = authProvider();
|
|
const ngDataProvider = dataProvider({ shapeTypes, authProvider: ngAuthProvider })
|
|
const ngLiveProvider = liveProvider({ shapeTypes })
|
|
|
|
const App = () => (
|
|
<Refine
|
|
authProvider={ngAuthProvider}
|
|
dataProvider={ngDataProvider}
|
|
liveProvider={ngLiveProvider}
|
|
options={{ liveMode: "auto", ... }}
|
|
...
|
|
>
|
|
...
|
|
```
|
|
|
|
### 4. Create the React pages
|
|
|
|
You can now call the various hooks provided by Refine to create, read, update or delete resources.
|
|
|
|
For `useForm`, `useTable`, `useShow`, you can pass the `Note` generated by NextGraph CLI.
|
|
|
|
Here's an example of a simple list view:
|
|
|
|
```tsx
|
|
import { List, useTable } from "@refinedev/antd";
|
|
import { Table } from "antd";
|
|
import { Note } from "./shapes/orm/notes.typings";
|
|
|
|
export const PostList = () => {
|
|
const { tableProps } = useTable<Note>();
|
|
return (
|
|
<List>
|
|
<Table {...tableProps} owKey="@graph">
|
|
<Table.Column dataIndex="@graph" title="ID" />
|
|
<Table.Column dataIndex="title" title="Title" />
|
|
<Table.Column dataIndex="content" title="Content" />
|
|
</Table>
|
|
</List>
|
|
);
|
|
};
|
|
```
|
|
|
|
## Commands
|
|
|
|
```bash
|
|
pnpm build
|
|
pnpm watch
|
|
pnpm publish
|
|
``` |