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.

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 which are transformed into "shape types" using its own tool. 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:

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

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:

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.

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
pnpm publish