Refine providers for NextGraph

Data, auth and live providers that can be used in any Refine application

Usage

For a quick overview, have a look at our example app.

1. Define your shapes

Refine relies on the concept of "resources", which are data types, to manage your application in a structured way. NextGraph identifies data types using ShEx shapes which are transformed into "shape types" using its own tool.

Create a /shapes directory and, within it, create 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:

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:

npx rdf-orm build --input ./shex --output ./orm

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:

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

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:

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

pnpm build
pnpm watch