Call an external API from Web SDK


Userlevel 1
Badge +1

Hi,

I am testing Miro REST API and WEB SDK and, so far, everything is woring fine.

My current test is calling an external API from WEB SDK App, but it is not working.

Is the ( API call ) code below valid for Miro ?

It works perfectly well in a normal React site.

As you can see in the code this example uses a non-authenticated and CORS enabled URI.

Thanks

import * as React from 'react';
import {createRoot} from 'react-dom/client';
import { useState, useEffect } from 'react'; // API

async function addSticky() {

const [data, setData] = useState(null);
useEffect(() => {
fetch("https://contabo.easylob.com:5443/echo?origin=Miro")
.then(response => response.json())
.then(json => setData(json))
.catch(error => console.error(error));
}, []);

const stickyNote = await miro.board.createStickyNote({
content: 'Hello, World!',
});

await miro.board.viewport.zoomTo(stickyNote);
}

const App = () => {
React.useEffect(() => {
addSticky();
}, []);

return (
...
);
};

 


8 replies

Userlevel 3
Badge +1

Hello Siegmar,

 

Thanks for letting us know. This is a community discussion so you do not need to close any ticket. Thanks for confirming. It’s all good.

 

Have a good one!

 

Cheers,

Mira

Userlevel 1
Badge +1

Hi,

The App is already working fine.

Thanks

HOW DO I CLOSE THE TICKET?

Badge

Hi,

I am testing Miro REST API and WEB SDK and, so far, everything is woring fine.

My current test is calling an external API from WEB SDK App, but it is not working.

Is the ( API call ) code below valid for Miro ?

It works perfectly well in a normal React site.

As you can see in the code this example uses a non-authenticated and CORS enabled URI.

Thanks

import * as React from 'react';
import {createRoot} from 'react-dom/client';
import { useState, useEffect } from 'react'; // API

async function addSticky() {

const [data, setData] = useState(null);
useEffect(() => {
fetch("https://contabo.easylob.com:5443/echo?origin=Miro")
.then(response => response.json())
.then(json => setData(json))
.catch(error => console.error(error));
}, []);

const stickyNote = await miro.board.createStickyNote({
content: 'Hello, World!',
});

await miro.board.viewport.zoomTo(stickyNote);
}

const App = () => {
React.useEffect(() => {
addSticky();
}, []);

return (
...
);
};

 

createRoot(document.getElementById('root')).render(<App />);

Yes, the code you provided is valid for Miro. It should work fine in Miro WEB SDK App but if it does not, it could be that the CORS settings are not configured correctly.

It would be best to double-check the configuration to make sure that the external API is properly accessible from the Miro WEB SDK App.

Userlevel 2
Badge

Hi @Siegmar,

I’m not sure I can tell what’s better to use for some particular app, but I can definitely share some Miro related bits :) 

  • for a form you can use either panels or the modals, we already discussed it in another question, but leaving it here for somebody who has the same later
  • you would use miro sdk from a client side of your app and rest api from a backend side, indeed
  • unless your app requires you to work from a backend (like the apps that coordinate sync between two systems), sdk could be more convenient to create widgets on the board. In rest api you have to think about rate limiting, and it may create more problems if your diagrams consist of a lot of widgets and/or you want them to appear on the board as quick as possible. 
Userlevel 1
Badge +1

Hey Will,

Thanks for your answer 😀
Calling the API in a frontend function was really just a test: it won’t be ther in prodution.

If you don’t mind, I would like to make one more question about Miro Architecture.
Lets imagine a fictious application where I want:

:: Create a form ( the Web SDK App form ? ), inside Miro GUI, to input some parameters
:: Send this parameters to a backend API at my own software ( hosted somewhere )
:: Based on this parameters my own software will create/update a Diagram
:: My software will create/update this diagram at Miro using:
    (1) Web SDK, if the processing is fast, using the API “response” to send the diagram elements
    (2) Miro API, if the processsing is slow, calling the API


In a fictious scenario like this what option below would you recommend, considering simplicity and Miro performance:

(1) JavaScript ( frontend ) + AWS Lambda ( to call my own software API ) 
(2) Next.js ( frontend ) + AWS Lambda ( to call my own software API )
(3) ? ( frontend ) + Express


Considering the options below Miro gives me when I create the App, I guess Express ( as a backend framework based on Node.js ) deals only with REST API not Web SDK: correct ?
If so, the option (3) above does not work in my scenario: correct ?

Preact [WEB SDK]
React [WEB SDK]
Vanilla [WEB SDK]
Vue [WEB SDK]
Miro Node Client Library with Express [REST API]
Next.js framework with Web SDK and API client installed [WEB SDK & REST API]

 

Sorry for the long question 😕

Userlevel 6
Badge +4

Hey @Siegmar,

Thanks for sharing, and glad to see you got it working!

While this may work fine for you (using fetch to call this API from within your function), we would generally recommend making any requests to a 3rd party API from your app’s backend, and then passing it to your frontend as needed, where you’re calling the Miro Web SDK. (Or, if you’re using a framework like NextJS, you could use a serverless function for this request).

This is just a best practice/recommendation, however, to ensure you don’t run into CORS or related react errors. 🙂

Userlevel 1
Badge +1

Hi,

I changed the approach to use fetchm and now it’s working fine:

async function addSticky() {
const options = {
method: "GET"
};
fetch("https://contabo.easylob.com:5443/echo?origin=Miro", options)
.then(response => response.text())
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error);
});
...
}

Just to check: is this the correct approach ?

Thanks

Userlevel 1
Badge +1

Hi,

I found the error during debugging:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions

The error, probably, is because I am calling useEffect from a JavaScript function ( add Sticky ).
So, how so I call an external API from Miro ? Using React, jQuery or Axios ?

Thanks

Reply