# 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. Add the providers to Refine

```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
```