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

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

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. 

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 cWEB SDK]
Vanilla WEB SDK]
Vue iWEB SDK]
Miro Node Client Library with Express nREST API]
Next.js framework with Web SDK and API client installed nWEB SDK & REST API]
 

Sorry for the long question 

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. 

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.

Hi,

The App is already working fine.

Thanks

HOW DO I CLOSE THE TICKET?

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