SDK

CenterGraph comes with an SDK package. This package is somewhat geared towards React but the core functionality is also available as thenables.

new CenterGraph(Options)

import { CenterGraph } from '@centergraph/sdk'

export const api = new CenterGraph({
  base: 'http://my-centergraph-domain.com',
})

• base: The domain where your CenterGraph server is hosted. In development mode this should be: http://localhost:8000.

Getting types for your data

{
  "scripts": {
    "dev": "wait-on http://localhost:8000 && curl http://localhost:8000/api/types > src/types.ts && vite --port=8001"
  }
}

It is recommended to use something similar to the above code sample. It fetches the types from the back-end and saves them in a local folder. If you are using Deno it is also possible to hot-link to the types.

All the types are in one file so it is easy to update the whole file.

The wait-on tool can help you in waiting for the back-end server to come online. This is helpful for development where you might start all the tools at once.

api.get<Type>(): Thenable<Type>

Fetch a document. This method does not understand what data is flowing through it, so it is to the developer to add the type.

import { Person } from './types'

const person = api.get<Person>('/contacts/john-doe')

If you would like to have a resource that is possible by adding .asResource() to the chain. The technical details are quite well explained here: https://www.youtube.com/watch?v=uZnXwuhYZBc.

The core idea of a Resource is that it throws a Promise instead of an Error as long as the promise is not resolved. React will resolve the promise and try again to render your component untill it does not catch a promise.

The state and cache of the promise are inside the api.

function MyComponent() {
  const person = api.get<Person>('/contacts/john-doe').asResource()
  return <h1>Hi {person.name}</h1>
}

api.getFolder(path: string): Thenable<NamedNode[]>

Retrieves the paths as NamedNode<string>s from a folder. If you would like to have a resource that is possible by adding .asResource() to the chain.

const folderUrls = await api.getFolder('/contacts/')

...

function MyComponent() {
  const folderUrls = api.getFolder('/contacts/').asResource()
  ...
}

api.query

A fluent API that will return NamedNode<string>[] ultimately. You can create a query by chaining more parts to it.

const count = api.count.filter(rdf('type'), schema('Person')).filter(schema('givenName')).sort(schema('name'))
// Thenable

const resource = count.asResource()
// Resource

const number = await count
// 3

api.count

A fluent API that will return a number ultimately. You can create a query by chaining more parts to it.

const count = api.count.filter(rdf('type'), schema('Person')).filter(schema('givenName')).sort(schema('name'))

<View data={api.get('/contacts/john-doe')} as="card" />

Uses the SHACL renderer to display data according to the SHACL shape that is referenced in the sh:shapesGraph. The as="card" specifies the sub graph that is references. Inside a SHACL shape document there can be multiple graphs each for displaying the data in a different way. There also will be a main shape to use for forms.

<Form data={api.get('/contacts/john-doe')} />

Uses the SHACL renderer to display data according to the SHACL shape that is referenced in the sh:shapesGraph.