@ -7,7 +7,16 @@ The `@ldo/connected-nextgraph` library allows you to integrate [NextGraph](https
First, install the required libraries: First, install the required libraries:
```bash ```bash
npm install nextgraph @ldo/connected -nextgraph npm install @ldo/connected -nextgraph
```
Also install a version of next-graph you wish to use
```bash
# For applications on NodeJS
npm install nextgraph
# For applications running in the web browser
npm install nextgraphweb
``` ```
## Usage: ## Usage:
@ -26,7 +35,7 @@ const ldoDataset = createNextGraphLdoDataset();
Before you can create or access resources, you need an active session: Before you can create or access resources, you need an active session:
```ts ```ts
import ng from "nextgraph"; import ng from "nextgraph" // or `import ng from "nextgraphweb"` for the browser
// Open your nextgraph wallet // Open your nextgraph wallet
const openedWallet = await ng.wallet_open_with_mnemonic_words( const openedWallet = await ng.wallet_open_with_mnemonic_words(
@ -45,9 +54,9 @@ const session = await ng.session_in_memory_start(
--- ---
### 3. Link Your Dataset to the NextGraph Session ### 3. Link Your Dataset to the NextGraph Session
```ts ```ts
ldoDataset.setContext("nextgraph", { ldoDataset.setContext("nextgraph", {
ng,
sessionId: session.session_id sessionId: session.session_id
}); });
``` ```
@ -114,6 +123,59 @@ await resource.update({
}); });
``` ```
## Using NextGraph with React
You can also use the `@ldo/react` library with `@ldo/connected-nextgraph` .
### 1. Create the react methods
First, we initialize some methods to use with the `@ldo/connected-nextgraph` and
`@ldo/react` libraries.
```typescript
// ./reactMethods.ts
import { nextGraphConnectedPlugin } from "@ldo/connected-nextgraph";
import { createLdoReactMethods } from "@ldo/react";
import ng from "nextgraphweb";
export const {
dataset,
useLdo,
useMatchObject,
useMatchSubject,
useResource,
useSubject,
useSubscribeToResource,
} = createLdoReactMethods([nextGraphConnectedPlugin]);
// Set NG on the data. When the sessionId is retrieved, `setContext` can be
// called at any time to set that as well.
dataset.setContext("nextgraph", {
ng,
sessionId: "SOME_ID"
});
```
### 2. Use the methods in your React components
From there, you can import these created methods in your React component and use
them as you would use any of the methods in the [@ldo/react-solid ](https://ldo.js.org/latest/guides/solid_react/ )
library.
```typescript
import { FunctionComponent } from "react";
import { PostShShapeType } from "./.ldo/post.shapeTypes";
import { useResource, useSubject } from "./reactMethods";
export const UseSubjectTest: FunctionComponent = () => {
useResource("did:ng:SOME_URI");
const post = useSubject(PostShShapeType, `SomeOtherUri` );
return < p role = "article" > {post.articleBody}< / p > ;
};
```
## Sponsorship ## Sponsorship
This project was made possible by a grant from NGI Zero Entrust via nlnet. Learn more on the [NLnet project page ](https://nlnet.nl/project/SolidUsableApps/ ). This project was made possible by a grant from NGI Zero Entrust via nlnet. Learn more on the [NLnet project page ](https://nlnet.nl/project/SolidUsableApps/ ).
Jackson Morgan
5 months ago