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