Description
I'm having trouble getting a data connector to work in my Lucid extension. Specifically, when I trigger a data connector action, I'm encountering issues that prevent the action from executing properly. I've set up the data connector in my `manifest.json` file and written the corresponding code, but it's not working as expected.
Manifest.json Setup
{
"dataConnectors": "
{
"name": "quodsi_data_connector",
"oauthProviderName": "",
"callbackBaseUrl": "http://localhost:5000/api",
"dataActions": {
"Simulate": "Scenario/simulate"
}
}
]
}
Data Connector Index.ts
import { DataConnector, DataConnectorClient } from 'lucid-extension-sdk';
import { simulateAction } from './actions/simulateaction';
export const makeDataConnector = (client: DataConnectorClient) =>
new DataConnector(client)
.defineAsynchronousAction("Simulate", simulateAction);
SimulateAction.ts
import { DataConnectorAsynchronousAction } from 'lucid-extension-sdk';
import axios from 'axios';
export const simulateAction: (action: DataConnectorAsynchronousAction) => Promise<{ success: boolean }> = async (
action,
) => {
try {
const data = action.data as { docId: string };
const documentId = data.docId;
const apiUrl = `http://localhost:5000/api/Scenario/simulate/${documentId}`;
const response = await axios.post(apiUrl, null, {
headers: {
Authorization: `Bearer ${action.context.userCredential}` // Pass OAuth token
}
});
if (response.status === 200) {
console.log("Simulate action successfully triggered.");
return { success: true };
} else {
console.error("Simulate action failed.", response.statusText);
return { success: false };
}
} catch (error) {
console.error("Error executing simulate action:", error);
return { success: false };
}
};
Extension Code that Calls `performDataAction’
protected messageFromFrame(message: any): void {
console.log('Message from iframe:', message);
if (message.messagetype === 'SimulateModel') {
console.log("Extension: Simulate button pressed");
const document = new DocumentProxy(this.client);
const docId = document.id;
console.log("Extension: docId=", docId);
this.client.performDataAction({
dataConnectorName: 'quodsi_data_connector',
actionName: 'Simulate',
actionData: { docId },
asynchronous: true
});
}
}
Network Tab (Chrome Dev Tools)
When the "Simulate" button is clicked, the following error appears in the Network tab:
```
DocumentContext is improperly formatted
```
Console Tab (Chrome Dev Tools)
The following logs are generated in the Console:
```
Message from iframe: {messagetype: 'SimulateModel', lucidId: '', version: '1', instancedata: '{}'}
Extension: Simulate button pressed
Extension: docId= 76990070-d3f1-4176-9437-bccf6eab1cdb
POST https://data-sync.lucid.app/asynchronousAction 400 (Bad Request)
```
I've tried logging the action data and context, and everything seems to be correctly formatted from my side. However, the action fails with a 400 Bad Request error, and the "DocumentContext is improperly formatted" message appears in the logs. I'm not sure what I'm missing or what might be going wrong.
In case my shared code is not enough, here are some random questions/thoughts:
- Will Data Connector console.log statements show up in dev tools?
- I used axios in my data connector code. I did not use axios in my editor extension. Is this allowed? if it is, how is it packaged up?
- My api is written in C# ASP.NET Core 8.x. I have successfully tested and debugged the following endpoint and can confirm it is working.
http://localhost:5000/api/Scenario/simulate/76990070-d3f1-4176-9437-bccf6eab1cdb- For my API, it is using CORS. What should i add as the allowed origin? I added https://lucid.app, is that correct?
Any help or guidance would be greatly appreciated!
Thanks, Dan