Commit to stream via js-client

Hello Speckle community :slight_smile:

In my current project I need to commit some data to a stream. right now I’m doing this through a .net server but it would be better for our project, if my react-typescript client could just directly commit the data to the stream. I couldnt find a way in the docu to do that. Can anyone help me out with this?

thanks for all the answers in advance!

1 Like

Heya @mgerhardt, good shout (and welcome back!).

For a heavy usecase (ie, lots of data!): We don’t have a proper js client yet, but @izzylys worked her magic for the sketchup connector and… basically all speckle data is sent via js from sketchup :smiley:

I think the magic is split between here and here. @izzylys can maybe provide a more detailed explanation once she wakes up.

For small objects: you can just use the graphql api - basically you’ll need to use the create object mutation, and then use the returned id as the referencedObject for the commit (create commit mutation).

heya!

as dim mentioned, we don’t have a full client yet. if you want to keep it simple, you can simply dump your json objects and send them using objectCreate from the graphql api or the /objects/${streamId} endpoint on the REST api

however, if you have a lot of data and want to use the Special Speckle Stuff™ like detaching (props prepended with an @) or chunking (props prepended with a @(chunkSize)) - click the links if you’re not familiar with what this means- you’ll need to do a bit more work.

I’ll gladly walk you through how I’m doing in Speckle SketchUp - although it is still a bit WIP. however, I believe as long as you give it a single “base object” (dict with a speckle_type prop), it should work as is and you can drop it into whatever you’re doing! you’ll just need to follow these steps as I’ve done in the Speckle Sketchup StreamCard

  1. instantiate a BaseObjectSerializer (this guy)

  2. pass a speckle “base object” (dict with a speckle_type: 'Base' prop) to writeJson()

  3. batch the serialised objects with batchObjects()

  4. send each batch to the server /objects/${streamId} endpoint

  5. create a commit on your stream with the root object id you got from writeJson()

if you run into any problems or need any more explanation on something, just let me know! also, if what’s there isn’t quite working how you need it, I am happy to talk through what is actually going on in more detail so you can work through it yourself! :rocket:

4 Likes

Hello izzy,

right now I’m stuck at getting an access token from Speckle that I need for GraphQL.

What I want to do is to get an access_token through a Javascript fetch request. I need to login to Speckle in the background and not through the auth page in the Speckle server. My Speckle server is running on my local machine through docker. The problem that I have right now is that I get a Cors-error when trying to fetch from “http://localhost:5002/auth/local/login?challenge=s88sbavs2ios4g3vmlimp” with my JS-Client saying " No ‘Access-Control-Allow-Origin’ header is present on the requested resource".

This is the code that I have copied from Postman because it works there:

		var myHeaders = new Headers();
		myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

		var urlencoded = new URLSearchParams();
		urlencoded.append("password", "examplePw");
		urlencoded.append("name", "exampleName");
		urlencoded.append("email", "example@examplemail.com");

		var requestOptions: any = {
			method: "POST",
			headers: myHeaders,
			body: urlencoded,
			redirect: "follow",
		};

		fetch("http://localhost:5002/auth/local/register?challenge=s88sbavs2ios4g3vmlimp", requestOptions)
			.then((response) => response.text())
			.then((result) => console.log(result))
			.catch((error) => console.log("error", error));
		return;

would appreciate some help here :slight_smile:

Hi @mgerhardt ,

If I understood this correctly, you are ok with putting the credentials of your Speckle Server in the frontend for the users to have access to? (if not, a backend server would be require to proxy your requests with a hidden access token)

For the login part, you can generate an access token manually and put that in the frontend code, and not do the username/password login.

Seems like CORS is not enabled on this route you’re fetching (code). I might be wrong but looks like a server side issue. :confused:

We don’t currently support that. There are two options:

  • you register your application on the speckle server, and then you go through the normal auth flow, via the consent screen (just like the graphql api explorer does).
  • the user generates an API token with the required scopes for your application. They will need to pass it on to your application.

It’s a security feature: only the frontend is allowed to access the authentication endpoints on the server. Applications looking to work with a user’s data from a Speckle server need to pass through the oauth authorization flows, which require user consent.

I know it’s a PITA.

2 Likes

Sadly the project requirements have changed and I have to implement a thin-client now. So commiting to a stream and all that stuff goes through a server now. Really would have liked to try it out but I will probably get to it in the future :slight_smile:

We don’t have a proper js client yet, but @izzylys worked her magic for the sketchup connector and… basically all speckle data is sent via js from sketchup :smiley:

Do you know I completely hadn’t twigged that was the case and had dismissed it because, well, SketchUp.

Forking now.

2 Likes

PS the excel one is also in JS and we’re planning to eventually combine parts of the two in some shared library/sdk: GitHub - specklesystems/speckle-excel: Speckle connector for Excel