Reconnexion/ng-eventually-refine-providers

Files

T

Sylvain Duchesne 8711dc5957 Move the package to the @ng-eventually scope

This repository is a sibling of @ng-org/refine-providers, not a successor:
that one binds a Refine application to the NextGraph SDK as it is today,
this one will bind it to @ng-eventually/polyfill, which stands in for the
SDK that has not shipped yet. Both have a legitimate existence and an
application may move from one to the other.

The scope says which of the two a dependency line is asking for.

2026-10-01 15:54:55 +02:00

3.3 KiB

Raw Blame History

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-eventually/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-eventually/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

3.3 KiB Raw Blame History