Get Speckle data with HTTP request

gokermu · 19 April 2022 09:17

Hey guys,

I am trying to receive a list of commits from a given stream and visualize it in another web app called Rows. It supports HTTP requests. How can I make a GET request to Speckle server? Any advice would be much appreciated? (Not an expert in making HTTP Requests )

AlanRynne · 19 April 2022 10:15

Hey @gokermu!

My suggestion would be to do that through our GraphQL API, which is a bit friendlier than normal REST API’s. Once you set up how to call the graphql endpoint, you can ask for any information from it.

Not to bore you with much of the details, but you can play around with the API directly on our explorer (Speckle GraphQL API) which deals with auth for you, or directly on the GraphQL UI (https://speckle.xyz/graphql) which requires you to pass in the auth headers yourself (this last one is a more similar scenario to what you’ll have to do)

Needless to say, all Speckle server’s have this feature, so if you’re using another server you can just replace the url for yours (https://YOURSPECKLE.SERVER/graphl)

Down to the interesting part

You can read more about the GraphQL api here GraphQL API | Speckle Docs

For the actual query you’re looking for, it would require to pass in the id of the stream. This would be hardcoding it into the query:

And this would be using graphql variables to create a more “general” query that could be used for any stream. Notice the left-bottom corner Query Variables tab now has a JSON object defining the id we want to query.

There’s quite a lot to wrap your head around GraphQL, so i suggest starting slow and steady Good thing is their documentation is actually great! https://graphql.org/learn/queries/#variables

Now to the code!!!

We could spend all day going through this, but I think it’s best if I just point you to the right place poke at a simple JS file that does this already.

This file has been re-used several times in other sites, but here’s the important part:

speckleFetch() takes a query input as a string (you can just copy the query from the explorer) and an optional vars object in case the query has variable key/value pairs.

What it does is just perform a POST request passing in the Auth token of the user in the headers, and the query and variables as a JSON string.

github.com

specklesystems/speckle-aectech-masterclass/blob/28aae5339ec23d9ed03b319475c123a07da4ce4e/frontend/src/speckleUtils.js#L57

    
      
            if (data.token) {
              // If retrieving the token was successful, remove challenge and set the new token and refresh token
              localStorage.removeItem(CHALLENGE)
              localStorage.setItem(TOKEN, data.token)
              localStorage.setItem(REFRESH_TOKEN, data.refreshToken)
            }
            return data
          }
          
          
// Calls the GraphQL endpoint of the Speckle server with a specific query.
          export async function speckleFetch(query, vars) {
            let token = localStorage.getItem(TOKEN)
            if (token)
              try {
                var res = await fetch(
                  `${SERVER_URL}/graphql`,
                  {
                    method: 'POST',
                    headers: {
                      'Authorization': 'Bearer ' + token,
                      'Content-Type': 'application/json'

You can see it being used a bit lower in the same file to setup some queries:

github.com

specklesystems/speckle-aectech-masterclass/blob/28aae5339ec23d9ed03b319475c123a07da4ce4e/frontend/src/speckleUtils.js#L91

    
      
          
          
// Fetch the current user data using the userInfoQuery
          export const getUserData = () => speckleFetch(userInfoQuery)
          
          
// Fetch for streams matching the specified text using the streamSearchQuery
          export const searchStreams = (e) => speckleFetch(streamSearchQuery, {searchText: e})
          
          
// Get commits related to a specific stream, allows for pagination by passing a cursor
          export const getStreamCommits = (streamId, itemsPerPage, cursor) => speckleFetch(streamCommitsQuery, {id: streamId, cursor, limit: itemsPerPage})
          
          
export const getObject = (streamId, objectId) => speckleFetch(streamObjectQuery, {streamId, objectId})
          
          
export const getStreams = () => speckleFetch(latestStreamsQuery).then(res => res.data?.streams)

The returned data should be a JSON object with the same nested structure as the query you requested

Hope that helps, but let us know if you have any trouble!

gokermu · 19 April 2022 10:36

hey @AlanRynne ,

thanks for taking your time to prepare the detailed answer. I have been playing with GraphQL explorer for some time now. It is indeed really fun and well documented😉. I was using speckle.xyz/explorer though.

I think you’ll understand what I mean when you watch the video down below. The tool has a built in GET, POST functions to make requests to the server. I think I need an API endpoint. Weather API’s endpoint as an example:

https://api.weatherapi.com/v1/forecast.json?key=0f0ca9ae374d4662a4460859222503&days=1&aqi=no&alerts=no&q=Berlin

Is there any way I can get something like this from Speckle server🤔?

AlanRynne · 19 April 2022 10:45

Oh interesting, it seems like you should use their post function (as all graphql interactions are actually post requests, even if you’re just getting data) so i think you want to be looking at this one instead Sending data to any API | Rows

This allows you to define the body and headers, which I think it’s all you need.

In the body you pass in the query and if necessary the variables, and that should do it!

gokermu · 19 April 2022 12:19

Thanks @AlanRynne, that was it.

teocomi · 19 April 2022 18:28

You can also find some snippets here, where I had to use normal HTTP requests as well: Using Google Apps Scripts | Speckle Docs