@powerhousedao/academy 3.2.0-dev.8 → 3.2.0-staging.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -37
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/02-ConfiguringDrives.md +29 -53
- package/docs/academy/02-MasteryTrack/04-WorkWithData/01-ReadingAndWritingThroughTheAPI.mdx +56 -174
- package/docs/academy/02-MasteryTrack/04-WorkWithData/04-analytics-processor.md +1 -281
- package/docs/academy/04-APIReferences/01-ReactHooks.md +5 -0
- package/package.json +1 -1
- package/src/css/custom.css +1 -7
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/06-DocumentTools/images/Screenshot 2025-06-26 at 17.41.14.png +0 -0
- package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/images/AddDrive.png +0 -0
- package/docs/academy/02-MasteryTrack/04-WorkWithData/07-drive-analytics.md +0 -467
- package/docs/academy/02-MasteryTrack/04-WorkWithData/images/AddNewDriveURL.png +0 -0
- package/docs/academy/02-MasteryTrack/04-WorkWithData/images/DocumentID.png +0 -0
- package/docs/academy/02-MasteryTrack/04-WorkWithData/images/OnboardingTasks.png +0 -0
- package/docs/academy/02-MasteryTrack/04-WorkWithData/images/QueryDocument.png +0 -0
- package/docs/academy/02-MasteryTrack/04-WorkWithData/images/QueryDocument2.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/00-DocumentToolbar.mdx +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/01-OperationHistory.md +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/02-RevisionHistoryTimeline.md +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/_category_.json +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/images/DocumentToolbar.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/images/committer-address-popup.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/images/revision-hash-popup.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/images/revision-history-list.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/images/revision-history-timeline.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{06-DocumentTools → 07-DocumentTools}/images/signature-details-popup.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{07-Authorization → 08-Authorization}/01-RenownAuthenticationFlow.md +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{07-Authorization → 08-Authorization}/02-Authorization.md +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{07-Authorization → 08-Authorization}/_category_.json +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{07-Authorization → 08-Authorization}/images/ConnectAddress.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{07-Authorization → 08-Authorization}/images/LoginComplete.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{07-Authorization → 08-Authorization}/images/OperationsHistory.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{07-Authorization → 08-Authorization}/images/RenownLogin.png +0 -0
- /package/docs/academy/02-MasteryTrack/03-BuildingUserExperiences/{07-Authorization → 08-Authorization}/images/ReturnToConnect.png +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,41 +1,6 @@
|
|
|
1
|
-
## 3.2.0-
|
|
1
|
+
## 3.2.0-staging.0 (2025-06-26)
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
- **academy:** add Drive Analytics documentation and examples ([daedc28a3](https://github.com/powerhouse-inc/powerhouse/commit/daedc28a3))
|
|
6
|
-
|
|
7
|
-
### ❤️ Thank You
|
|
8
|
-
|
|
9
|
-
- Guillermo Puente @gpuente
|
|
10
|
-
|
|
11
|
-
## 3.2.0-dev.7 (2025-06-28)
|
|
12
|
-
|
|
13
|
-
### 🚀 Features
|
|
14
|
-
|
|
15
|
-
- starting to stub out a complete example of the analytics processor ([a84ed2dcf](https://github.com/powerhouse-inc/powerhouse/commit/a84ed2dcf))
|
|
16
|
-
|
|
17
|
-
### ❤️ Thank You
|
|
18
|
-
|
|
19
|
-
- Benjamin Jordan (@thegoldenmule)
|
|
20
|
-
|
|
21
|
-
## 3.2.0-dev.6 (2025-06-27)
|
|
22
|
-
|
|
23
|
-
### 🚀 Features
|
|
24
|
-
|
|
25
|
-
- **connect:** use atom store and provider from state library ([28f646636](https://github.com/powerhouse-inc/powerhouse/commit/28f646636))
|
|
26
|
-
- added drive analytics processor ([#1607](https://github.com/powerhouse-inc/powerhouse/pull/1607))
|
|
27
|
-
|
|
28
|
-
### 🩹 Fixes
|
|
29
|
-
|
|
30
|
-
- updated document-engineering ver ([3522179d6](https://github.com/powerhouse-inc/powerhouse/commit/3522179d6))
|
|
31
|
-
- updated atoms with header changes ([2b557197a](https://github.com/powerhouse-inc/powerhouse/commit/2b557197a))
|
|
32
|
-
|
|
33
|
-
### ❤️ Thank You
|
|
34
|
-
|
|
35
|
-
- Benjamin Jordan (@thegoldenmule)
|
|
36
|
-
- Guillermo Puente
|
|
37
|
-
- Guillermo Puente Sandoval
|
|
38
|
-
- ryanwolhuter
|
|
3
|
+
This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
|
|
39
4
|
|
|
40
5
|
## 3.2.0-dev.5 (2025-06-26)
|
|
41
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Configure a drive
|
|
2
2
|
|
|
3
|
-
A drive in Powerhouse is a container for documents and data. It's a place where you can organize and store your documents and share them with others. This guide
|
|
3
|
+
A drive in Powerhouse is a container or a wrapper for documents and data. It's a place where you can organize and store your documents and share them with others. This guide will walk you through the process of configuring and managing drives in your Powerhouse environment.
|
|
4
4
|
|
|
5
5
|
:::info **Prerequisites**
|
|
6
6
|
|
|
@@ -14,74 +14,64 @@ Before configuring a drive, ensure you have:
|
|
|
14
14
|
|
|
15
15
|
### Local drives
|
|
16
16
|
|
|
17
|
-
A local drive is a container for local documents and data, hosted on your local machine. Technically
|
|
17
|
+
A local drive is a container for local documents and data, hosted on your local machine. Technically a drive is just another document model with a list of the documents inside the drive. When you run connect locally with `ph connect` a local drive is automatically added. You can also create a new local drive by clicking **'add drive'** in connect.
|
|
18
18
|
|
|
19
19
|
### Remote drives vs. reactors
|
|
20
20
|
|
|
21
|
-
Remote drives in Powerhouse allow you to connect to and work with data stored in external systems or cloud services. These drives act as bridges between Powerhouse contributors or other data sources, enabling seamless data synchronization. Drives can exist in
|
|
21
|
+
Remote drives in Powerhouse allow you to connect to and work with data stored in external systems or cloud services. These drives act as bridges between Powerhouse contributors and/or other data sources, enabling seamless data synchronization. Drives can exist in 3 category locations.
|
|
22
22
|
|
|
23
23
|
- **Local Storage**: For offline or on-device access.
|
|
24
24
|
- **Cloud Storage**: For centralized, scalable data management.
|
|
25
25
|
- **Decentralized Storage**: Such as Ceramic or IPFS, enabling distributed and blockchain-based storage options.
|
|
26
26
|
|
|
27
27
|
:::tip **Explainer**
|
|
28
|
-
**Powerhouse Reactors** are the nodes in the network that store and
|
|
29
|
-
Reactors can be configured for local storage, centralized cloud storage
|
|
28
|
+
**Powerhouse Reactors** are the nodes in the network that store and synchronise documents & drives , resolve conflicts and rerun operations to verify document event histories.
|
|
29
|
+
Reactors can be configured for local storage, centralized cloud storage or on a decentralized storage network.
|
|
30
30
|
|
|
31
|
-
A reactor allows you to store multiple documents
|
|
31
|
+
A reactor allows you to store multiple documents, but also host **drives** & Drive Explorers with different organisational purposes, users, access rights and more.
|
|
32
32
|
:::
|
|
33
33
|
|
|
34
|
-
A drive
|
|
34
|
+
A drive exists by making use of a reactor and the storagelayer that specific reactor is based on. A reactor is the lower level component that makes synchronisation of documents & drives possible.
|
|
35
35
|
|
|
36
36
|
### Drive apps
|
|
37
37
|
|
|
38
|
-
**Drive Explorers** (also known as Drive Apps) are specialized interfaces that enhance how users interact with
|
|
38
|
+
**Drive Explorers** (also known as Drive Apps) are specialized interfaces that enhance how users interact with document models within a drive. As mentioned previously, technically a drive is just another document, with a list of the documents inside the drive. So it is obvious that you can create a custom editor for your drive-document.
|
|
39
39
|
|
|
40
|
-
These customized editors are called Drive
|
|
40
|
+
These customized editors are called Drive explorers or Drive Apps. They provide custom views, organization tools, and interactive features tailored to specific use cases. For example, a Drive Explorer might present data as a Kanban board, provide aggregated insights, or offer specialized widgets for data processing.
|
|
41
41
|
|
|
42
42
|
To learn more about building and customizing Drive Explorers, check out our [Building a Drive Explorer](/academy/MasteryTrack/BuildingUserExperiences/BuildingADriveExplorer) guide.
|
|
43
43
|
|
|
44
44
|
|
|
45
45
|
## Creating a new drive
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
<img src={require("./images/CreateDrive.png").default} alt="Create a new drive" />
|
|
49
|
-
<figcaption>The drive management modal after clicking the 'Create New Drive' button.</figcaption>
|
|
50
|
-
</figure>
|
|
47
|
+

|
|
51
48
|
|
|
52
49
|
To create a new drive in Powerhouse, follow these steps:
|
|
53
|
-
1. Click the "**Create New Drive**" button in the Connect interface or the
|
|
50
|
+
1. Click on the "**Create New Drive**" button in the Connect interface or in the Connect sidebar on the (+) Icon.
|
|
54
51
|
2. In the modal that appears, enter a name for your drive in the "**Drive Name**" field.
|
|
55
52
|
3. Select the desired Drive App (such as the Generic Drive Explorer, or any other Drive App you've installed).
|
|
56
53
|
4. Choose the location for your drive: **Local** (only available to you), **Cloud** (available to people in this drive), or **Public** (available to everyone).
|
|
57
54
|
5. (Optional) Enable the "Make available offline" toggle if you want to keep a local backup of your drive.
|
|
58
55
|
6. Once all options are set, click the "Create new drive" button to finalize and create your drive.
|
|
59
56
|
|
|
60
|
-
##
|
|
57
|
+
## Adding a new remote drive via graphql mutation
|
|
61
58
|
|
|
62
59
|
You can also add a new remote drive to your Connect environment programmatically using GraphQL mutations. This is especially useful for automation, scripting, or integrating with external systems.
|
|
63
60
|
|
|
64
61
|
:::info **Prerequisites**
|
|
65
|
-
- Access to the Switchboard or remote reactor (server node) of your Connect instance.
|
|
66
|
-
|
|
67
|
-
ph reactor
|
|
68
|
-
`
|
|
69
|
-
- The GraphQL endpoint of your instance. For example, for the staging environment, use: `https://staging.switchboard.phd/graphql/system` (this is a supergraph gateway. Read more about [subgraphs and supergraphs here](/academy/MasteryTrack/WorkWithData/WorkingWithSubgraphs).
|
|
62
|
+
- Access to the Switchboard or remote reactor (server node) of your Connect instance.
|
|
63
|
+
- The GraphQL endpoint for your instance. For example, for the staging environment, use: `https://staging.switchboard.phd/graphql/system` (this is a supergraph gateway).
|
|
70
64
|
- Appropriate permissions to perform mutations.
|
|
71
65
|
:::
|
|
72
66
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
</figure>
|
|
67
|
+
### Steps
|
|
68
|
+
1. **Navigate to the GraphQL Playground or use a GraphQL client**
|
|
69
|
+
- Open [https://staging.switchboard.phd/graphql/system](https://staging.switchboard.phd/graphql/system) in your browser, or use a tool like [GraphQL Playground](https://www.apollographql.com/docs/apollo-server/testing/graphql-playground/).
|
|
77
70
|
|
|
78
|
-
|
|
79
|
-
- Open [https://switchboard.phd/graphql/system](https://switchboard.phd/graphql/system) in your browser, or use a tool like [GraphQL Playground](https://www.apollographql.com/docs/apollo-server/testing/graphql-playground/).
|
|
80
|
-
|
|
81
|
-
### 2. **Prepare the Mutation**
|
|
71
|
+
2. **Prepare the Mutation**
|
|
82
72
|
- Use the following mutation to create a new drive:
|
|
83
73
|
|
|
84
|
-
```graphql
|
|
74
|
+
```graphql
|
|
85
75
|
mutation Mutation($name: String!, $icon: String, $addDriveId: String, $slug: String) {
|
|
86
76
|
addDrive(name: $name, icon: $icon, id: $addDriveId, slug: $slug) {
|
|
87
77
|
icon
|
|
@@ -92,8 +82,8 @@ You can also add a new remote drive to your Connect environment programmatically
|
|
|
92
82
|
}
|
|
93
83
|
```
|
|
94
84
|
|
|
95
|
-
-
|
|
96
|
-
```json
|
|
85
|
+
- Example variables:
|
|
86
|
+
```json
|
|
97
87
|
{
|
|
98
88
|
"name": "AcademyTest",
|
|
99
89
|
"icon": "https://static.thenounproject.com/png/3009860-200.png",
|
|
@@ -101,12 +91,12 @@ You can also add a new remote drive to your Connect environment programmatically
|
|
|
101
91
|
"slug": null
|
|
102
92
|
}
|
|
103
93
|
```
|
|
104
|
-
- You can also provide a custom `id` or `
|
|
94
|
+
- You can also provide a custom `id`, `slug`, or `preferredEditor` if needed.
|
|
105
95
|
|
|
106
|
-
|
|
96
|
+
3. **Execute the Mutation**
|
|
107
97
|
- Run the mutation. On success, you will receive a response containing the new drive's `icon`, `id`, `name`, and `slug`:
|
|
108
98
|
|
|
109
|
-
```json
|
|
99
|
+
```json
|
|
110
100
|
{
|
|
111
101
|
"data": {
|
|
112
102
|
"addDrive": {
|
|
@@ -119,30 +109,16 @@ You can also add a new remote drive to your Connect environment programmatically
|
|
|
119
109
|
}
|
|
120
110
|
```
|
|
121
111
|
|
|
122
|
-
|
|
112
|
+
4. **Construct the Drive URL**
|
|
123
113
|
- Once you have the `id` or `slug`, you can construct the drive URL for Connect:
|
|
124
|
-
- Format: `domain/d
|
|
125
|
-
-
|
|
126
|
-
- Example: `https://connect.phd/d/6461580b-d317-4596-942d-f6b3d1bfc8fd`
|
|
127
|
-
- Example: `https://localhost:4001/d/6461580b-d317-4596-942d-f6b3d1bfc8fd`
|
|
128
|
-
|
|
129
|
-
### 5. **Add the Drive in Connect**
|
|
130
|
-
- Use the constructed URL to add or access the drive in your Connect environment via the 'Add Drive' button.
|
|
114
|
+
- Format: `domain/d/driveId` or `domain/d/driveSlug`
|
|
115
|
+
- Example: `https://staging.connect.phd/d/6461580b-d317-4596-942d-f6b3d1bfc8fd`
|
|
131
116
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<figcaption>The 'Add Drive' button that allows you to enter your constructed Drive URL.</figcaption>
|
|
135
|
-
</figure>
|
|
117
|
+
5. **Add the Drive in Connect**
|
|
118
|
+
- Use the constructed URL to add or access the drive in your Connect environment.
|
|
136
119
|
|
|
137
120
|
---
|
|
138
121
|
|
|
139
122
|
This approach allows you to automate drive creation and integration with other systems, making it easy to manage drives at scale.
|
|
140
123
|
|
|
141
|
-
## Up next
|
|
142
|
-
|
|
143
|
-
You've now experienced the use of GraphQL to modify or read data captured in Powerhouse for the first time.
|
|
144
|
-
You can now either continue with:
|
|
145
|
-
- User interfaces and [build a custom drive experiences](/academy/MasteryTrack/BuildingUserExperiences/BuildingADriveExplorer)
|
|
146
|
-
- Keep playing with data and the [Switchboard API](/academy/MasteryTrack/WorkWithData/ReadingAndWritingThroughTheAPI)
|
|
147
124
|
|
|
148
|
-
Enjoy!
|
|
@@ -2,232 +2,114 @@
|
|
|
2
2
|
|
|
3
3
|
## Introduction to Switchboard
|
|
4
4
|
|
|
5
|
-
**Switchboard** is the API interface that allows developers and data engineers to get access to data collected through document models in Connect
|
|
6
|
-
After structurally capturing the desired data
|
|
5
|
+
**Switchboard** is the API interface that allows developers and data engineers to get access to the data, that is being collected through the use of document models in Connect & Fusion.
|
|
6
|
+
After structurally capturing the desired data of your formalised business processes the data can be used to build insightful experiences in external websites, drive widgets or create specific reports and dashboard in fusion.
|
|
7
7
|
|
|
8
|
-
:::tip Using
|
|
9
|
-
Since your document models
|
|
8
|
+
:::tip Using the state schema of your document
|
|
9
|
+
Since your document models have been defined with a GraphQL schema, you can use the same objects and fields in your queries and mutations to retrieve or write data from and to your document models.
|
|
10
10
|
:::
|
|
11
11
|
|
|
12
12
|
## Querying a document with the GraphQL API
|
|
13
13
|
|
|
14
14
|
### Starting the reactor locally
|
|
15
15
|
|
|
16
|
-
In this tutorial
|
|
17
|
-
To make our document model available in the Apollo Studio Sandbox
|
|
16
|
+
In this tutorial we'll show how to use a **GraphQL** query to query a document model. We'll **continue on the To-do List example** from our [introduction tutorial](/academy/GetStarted/CreateNewPowerhouseProject) , but the process can be applied to any other document model.
|
|
17
|
+
To make our document model available in the Apollo Studio Sandbox we'll need to store it on a remote [Reactor](/academy/Architecture/WorkingWithTheReactor).
|
|
18
18
|
|
|
19
19
|
:::info What are reactors?
|
|
20
|
-
**Powerhouse Reactors** are the nodes in the network that store documents, resolve conflicts
|
|
21
|
-
Reactors can be configured for local storage, centralized cloud storage
|
|
20
|
+
**Powerhouse Reactors** are the nodes in the network that store documents, resolve conflicts and rerun operations to verify document event histories.
|
|
21
|
+
Reactors can be configured for local storage, centralized cloud storage or on a decentralized storage network.
|
|
22
22
|
:::
|
|
23
23
|
|
|
24
|
-
Just
|
|
24
|
+
Just like we can run Connect locally in studio mode we can run a remote node or a Reactor locally.
|
|
25
|
+
Use the following commands:
|
|
25
26
|
|
|
26
27
|
```bash
|
|
27
28
|
ph reactor
|
|
28
29
|
```
|
|
29
30
|
|
|
30
|
-
To start both Connect and a Reactor locally at the same time in a Powerhouse project
|
|
31
|
+
To start both Connect and a Reactor locally at the same time in a Powerhouse project you can use the following command:
|
|
31
32
|
```bash
|
|
32
33
|
ph dev
|
|
33
34
|
```
|
|
34
35
|
|
|
35
|
-
|
|
36
|
+
It will return a url to access the Reactor.
|
|
36
37
|
```bash
|
|
37
38
|
[Reactor]: ➜ Reactor: http://localhost:4001/d/powerhouse
|
|
38
39
|
```
|
|
39
40
|
|
|
40
|
-
### Adding a remote drive or
|
|
41
|
+
### Adding a remote drive or reactor to Connect
|
|
41
42
|
|
|
42
|
-
If the remote drive or Reactor isn't present yet in
|
|
43
|
+
If the remote drive or Reactor isn't present yet in connect you can add it by clicking the (+) button in the Connect drive navigation
|
|
44
|
+
and using the localhost url to add a new drive with it's underlying reactor. Usually http://localhost:4001/d/powerhouse
|
|
43
45
|
|
|
44
|
-
Get access to an **
|
|
45
|
-
Click the (+) to add a public drive. To add a new drive
|
|
46
|
+
Get access to an **organisations drive** instances by adding their drive to your Connect Drive navigation tree view with the help of the correct drive url.
|
|
47
|
+
Click the (+) to add a public drive. To add a new drive you'll have to know the correct public URL of the drive.
|
|
46
48
|
|
|
47
|
-
|
|
48
|
-
<img src={require("./images/AddNewDriveURL.png").default} alt="Add a drive through an URL" />
|
|
49
|
-
<figcaption>The 'Add Drive' button that allows you to enter a Drive URL.</figcaption>
|
|
50
|
-
</figure>
|
|
49
|
+
## Querying the state of a document
|
|
51
50
|
|
|
52
|
-
|
|
51
|
+
Now that we have our remote reactor and/or drive running we can store our document model on it.
|
|
52
|
+
Let's quickly create a new to-do list document to test the process.
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
Let's quickly create a new to-do list document in Connect Studio to test the process. Let's call it **'Powerhouse-onboarding-tasks'**.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
Add the following to-dos to your list:
|
|
54
|
+
Add to following todo's to your list:
|
|
59
55
|
- [ ] Sign up for Powerhouse
|
|
60
56
|
- [ ] Do the work
|
|
61
57
|
- [ ] Deliver the work
|
|
62
58
|
- [ ] Send the invoice
|
|
63
59
|
- [ ] Get paid
|
|
64
60
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
<figure className="image-container">
|
|
68
|
-
<img src={require("./images/OnboardingTasks.png").default} alt="Operation history in Connect" />
|
|
69
|
-
<figcaption>The operation history of the to-do list document, showing each change made.</figcaption>
|
|
70
|
-
</figure>
|
|
71
|
-
|
|
72
|
-
Now that we have some data in our document model, we can query it through the GraphQL API.
|
|
73
|
-
|
|
74
|
-
### Option 1: Query your document via the Switchboard API Button.
|
|
75
|
-
|
|
76
|
-
Whenever you want to start a query from a document within Connect, you can open Switchboard by clicking the Switchboard icon in the top right-hand corner of the document editor interface.
|
|
77
|
-
The Switchboard API button at the top of your document model will get you the complete state of your current document.
|
|
78
|
-
This will prepopulate the Apollo Studio Sandbox with the correct **DocumentID** for your document model.
|
|
61
|
+
Now that we have some data in our document model we can query it through the GraphQL API.
|
|
79
62
|
|
|
80
|
-
|
|
81
|
-
<img src={require("./images/SwitchboardButton.png").default} alt="Switchboard button in document editor" />
|
|
82
|
-
<figcaption>The Switchboard button provides a direct link to the GraphQL API for the document.</figcaption>
|
|
83
|
-
</figure>
|
|
63
|
+
### 1. The complete state of the document
|
|
84
64
|
|
|
85
|
-
|
|
65
|
+
Whenever you want to start a query from a document within connect you can open up Switchboard by looking for the Switchboard logo in the top right hand corner of the document editor interface.
|
|
66
|
+
This will prepopulate the Apollo Studio Sandbox with the correct **DocumentID** for your document model. This feature will not be available for documents stored on local drives.
|
|
86
67
|
|
|
87
|
-
|
|
88
|
-
Copy this ID to use it in the Switchboard API.
|
|
68
|
+

|
|
89
69
|
|
|
90
|
-
|
|
91
|
-
<img src={require("./images/DocumentID.png").default} alt="Copy the DocumentID" />
|
|
92
|
-
<figcaption>You can copy your Document ID from your operations history.</figcaption>
|
|
93
|
-
</figure>
|
|
70
|
+
The documentation on the left hand side of the Apollo Sandbox will show you all of the different fields that are available to query.
|
|
94
71
|
|
|
95
|
-
|
|
96
|
-
The documentation on the left-hand side of the Apollo Sandbox will show you all the different fields that are available to query.
|
|
72
|
+

|
|
97
73
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
</figure>
|
|
74
|
+
Alternatively we can just use our reactor url and endpoint to figure out the document id.
|
|
75
|
+
We can find out what the id of our document is by querying the drive for it's documents.
|
|
76
|
+
Since we only have one document in our drive it will return the id of our to-do list document.
|
|
102
77
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
**Alternatively**, we can use our Reactor URL and endpoint to figure out the document ID.
|
|
106
|
-
e.g., http://localhost:4001/graphql/system, https://switchboard.phd/graphql/system or your custom https://switchboard.domain/graphql/system
|
|
107
|
-
|
|
108
|
-
We can find out the ID of our document by querying the drive for its documents.
|
|
109
|
-
Since we only have one document in our drive, this query will return the ID of our to-do list document.
|
|
110
|
-
|
|
111
|
-
```graphQL title="Document ID Query"
|
|
112
|
-
query Query {
|
|
113
|
-
ToDoList {
|
|
114
|
-
getDocuments {
|
|
115
|
-
id
|
|
116
|
-
name
|
|
117
|
-
documentType
|
|
118
|
-
revision
|
|
119
|
-
created
|
|
120
|
-
lastModified
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
```
|
|
78
|
+
This example query is structured to request a document by its unique identifier (id).
|
|
79
|
+
It extracts common fields such as **id**, **name**, **documentType**, **revision**, **created**, and **lastModified**.
|
|
125
80
|
|
|
126
|
-
|
|
127
|
-
|
|
81
|
+
In the above example we queried for the content of the operations. Let's compare the results with the document operation history.
|
|
82
|
+
Side by side you can see the document content and the operation history.
|
|
128
83
|
|
|
129
|
-
|
|
84
|
+
Below is the operation history of the todo list document. As you can see the operations are logged in the order they were executed.
|
|
85
|
+
As you can see there is a 'Delete' operation in the history on revision 5 as we forgot to add 'Send the invoice' to our list.
|
|
86
|
+

|
|
130
87
|
|
|
131
|
-
|
|
88
|
+
Now let's query the content of the document using Apollo Studio Sandbox. The left sidebar shows the schema documentation, where you can explore all available fields and types for your document model.
|
|
132
89
|
|
|
133
|
-
|
|
90
|
+
For our To-do List document, let's construct a query that fetches the operations with the help of a nested operations field
|
|
134
91
|
|
|
135
|
-
```graphql
|
|
136
|
-
query
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
92
|
+
```graphql
|
|
93
|
+
query {
|
|
94
|
+
document(id: "...") {
|
|
95
|
+
name
|
|
96
|
+
documentType
|
|
97
|
+
revision
|
|
98
|
+
created
|
|
99
|
+
lastModified
|
|
100
|
+
... on TodoList {
|
|
101
|
+
operations {
|
|
102
|
+
type
|
|
103
|
+
id
|
|
104
|
+
inputText
|
|
146
105
|
}
|
|
147
106
|
}
|
|
148
107
|
}
|
|
149
108
|
}
|
|
150
109
|
```
|
|
151
110
|
|
|
152
|
-
|
|
153
|
-
{
|
|
154
|
-
"documentId": "03eb6780-f1d7-438c-84a0-6d93dfb8f6af", // or replace this with your specific doc ID
|
|
155
|
-
"driveId": "powerhouse" // or replace this with your specific driveId
|
|
156
|
-
}
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
This query will return the current state of the document, including all to-do items and stats.
|
|
160
|
-
|
|
161
|
-
<figure className="image-container">
|
|
162
|
-
<img src={require("./images/OperationsQuery.png").default} alt="Executing a mutation for a to-do item in Apollo Studio" />
|
|
163
|
-
<figcaption>The Apollo Studio Sandbox showing the <code>addTodoItem</code> mutation. You can see the variables passed in and the response from the server.</figcaption>
|
|
164
|
-
</figure>
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
## Mutate the state of a document
|
|
168
|
-
|
|
169
|
-
Now that we know how to query the state of a document, we can start to write to it.
|
|
170
|
-
|
|
171
|
-
To perform write operations, we use **GraphQL Mutations**. Mutations are similar to queries, but they are used to create, update, or delete data. For our To-do List, we'll want to add, check, and remove items.
|
|
172
|
-
|
|
173
|
-
### Adding a new to-do item
|
|
174
|
-
|
|
175
|
-
Let's start by adding a new item to our list. The document model for our to-do list has an `ADD_TODO_ITEM` operation, which translates to an `addTodoItem` mutation in GraphQL.
|
|
176
|
-
To use this mutation, you need to provide the `docId` of the to-do list you want to modify, and the `text` and `id` for the new to-do item. We'll specify these via variables.
|
|
177
|
-
|
|
178
|
-
Here is an example of how to structure the mutation:
|
|
179
|
-
|
|
180
|
-
```graphql title="example-add-mutation"
|
|
181
|
-
mutation Mutation($docId: PHID, $input: ToDoList_AddTodoItemInput) {
|
|
182
|
-
ToDoList_addTodoItem(docId: $docId, input: $input)
|
|
183
|
-
}
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
```graphql title="example-variables"
|
|
187
|
-
{
|
|
188
|
-
"docId": "03eb6780-f1d7-438c-84a0-6d93dfb8f6af",
|
|
189
|
-
"input": {
|
|
190
|
-
"text": "My new to-do from GraphQL",
|
|
191
|
-
"id": "1"
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
Replace the example `docId` with the actual ID of your document. You can get this ID by querying the drive as we did before.
|
|
197
|
-
|
|
198
|
-
When you execute this mutation in Apollo Studio, it will add the new item to your to-do list. The response will return the number of to-do's on your list.
|
|
199
|
-
|
|
200
|
-
### Deleting a to-do item
|
|
201
|
-
|
|
202
|
-
To delete an item, you'll need its unique identifier. When you query for the to-do items in your list, each one will have an `id`. You'll use this `id` to specify which item to delete.
|
|
203
|
-
|
|
204
|
-
The document model provides a `DELETE_TODO_ITEM` operation, which corresponds to a `deleteTodoItem` mutation.
|
|
205
|
-
|
|
206
|
-
Here's how you can use it:
|
|
207
|
-
```graphql title="example-delete-mutation"
|
|
208
|
-
mutation Mutation($docId: PHID, $input: ToDoList_DeleteTodoItemInput) {
|
|
209
|
-
ToDoList_deleteTodoItem(docId: $docId, input: $input)
|
|
210
|
-
}
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
```graphql title="example-variables"
|
|
214
|
-
{
|
|
215
|
-
"docId": "03eb6780-f1d7-438c-84a0-6d93dfb8f6af",
|
|
216
|
-
"input": {
|
|
217
|
-
"id": "0.6325811781889789"
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
```
|
|
221
|
-
|
|
222
|
-
Make sure to replace the `docId` and `id` with the appropriate values for your document and the item you wish to delete.
|
|
223
|
-
|
|
224
|
-
After executing this mutation, the specified to-do item will be removed from your list.
|
|
225
|
-
|
|
226
|
-
### Verifying the changes
|
|
227
|
-
|
|
228
|
-
After performing a write mutation, you can verify that the change was successful in a couple of ways:
|
|
111
|
+
This query will return all operations performed on the document, including ADD_TODO_ITEM and DELETE_TODO_ITEM operations, allowing us to see the complete history of changes.
|
|
229
112
|
|
|
230
|
-
|
|
231
|
-
2. **Check the Operation History:** The operation history in Connect will show the new `ADD_TODO_ITEM` or `DELETE_TODO_ITEM` operation, along with who performed it and when. This provides a complete audit trail of all changes to the document.
|
|
113
|
+
## Writing to a document
|
|
232
114
|
|
|
233
|
-
|
|
115
|
+
Now that we know how to query the state of a document we can start to write to it.
|