API in Component not working after Deployment

[Lakshit-Singhal]

Block.js =>

const bm = editor.BlockManager;
  const canvas = editor.Canvas
  bm.add('comp-block', {
      label: 'Component',
      category: 'Extra',
      content: {
        type: 'component-test'
      },
      attributes: {
          class: 'fa fa-bars'
      },

  });

Component.js =>

editor.DomComponents.addType('component-test', {
      model: {
        defaults: {
          endpoint: '   //  API URL  //  ', 
          traits: [
            {
              type: 'select',
              name: 'endpoint',
              changeProp: 1,
              options: ['endpoint'],
            }
          ]
        },
        init() {
          this.listenTo(this, 'change:endpoint', this.refreshContent);
          this.refreshContent();
        },
         refreshContent() {
          const { endpoint } = this.attributes;
          const response =  axios.get(endpoint,
          {
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            }
          })
           var result= //  API Response  //
              this.components(result);
        } 
      }
    });

We are able to call the API and it works in Deployment when we are passing the whole html with script, body, style in Content attribute of Block Manager

Content :
 <script>
    var request = new XMLHttpRequest()
          request.open('GET',' //    API URL    // ', true)
          request.setRequestHeader("Content-type", "application/json;charset=UTF-8");
          request.setRequestHeader("Accept", "application/json, text/plain, */*");
           request.onload = function(){
          var jsonData = JSON.parse(this.response)

          request.send()
</script>

But when the API is called through the Component it's not working when the page loads in deployment. It only works when i drop it on the editor and not when it loads as a deployed url.

Ex:

model: {
        defaults: {
            endpoint: ' API URL ', // some prop for the trait
            traits: [
                {
                    type: 'select',
                    name: 'endpoint',
                    changeProp: 1,
                    options: [ 'endpoint' ],
                }
            ]
        },
        init() {
            this.listenTo(this, 'change:endpoint', this.refreshContent);
            this.refreshContent();
        },
        async refreshContent() {
            const { endpoint } = this.attributes;
            const response = await fetch(endpoint);
            ...
            let result = '';
            // ...  HTML result from the async response
            ...         
            this.components(result);
        }
    }

[artf]

It only works when i drop it on the editor and not when it loads as a deployed url

If you load stuff from some kind of storage (eg. DB) in your "deployed url", be sure to have a correct remote setup

[Lakshit-Singhal]

@artf I understand your concern but in the deployed version API calls inside blockmanager content are working only the component api's are not getting called. So is it a problem with remote setup or something else ?

KIndly help me regarding the issue ... Thanks in Advance!

[artf]

So is it a problem with remote setup or something else ?

Yeah, as you described it might be an incorrect storage setup (check also errors/warning in console)

[Lakshit-Singhal]

@artf Thanks for building such an amazing tool. It is a really exciting and powerful one !

There are not any warning or errors in the console both for the deployed version and in the current code. But as lisited above the API is not being hit in the deployed version if it is written inside components. Ex - refreshContent () listed above.

It only works when i drop it on the editor and not when it loads as a deployed url

If you load stuff from some kind of storage (eg. DB) in your "deployed url", be sure to have a correct remote setup

So as i'm using Node as the backend so do i have to configure it with the editor. As there is an example in Docs regarding grapesJs Firestore.

Kindly help me with issue ... Thanks in Advance !

[Aar-if]

@artf Thanks for building such an amazing tool. It is a really exciting and powerful one !

There are not any warning or errors in the console both for the deployed version and in the current code. But as lisited above the API is not being hit in the deployed version if it is written inside components. Ex - refreshContent () listed above.

It only works when i drop it on the editor and not when it loads as a deployed url

If you load stuff from some kind of storage (eg. DB) in your "deployed url", be sure to have a correct remote setup

So as i'm using Node as the backend so do i have to configure it with the editor. As there is an example in Docs regarding grapesJs Firestore.

Kindly help me with issue ... Thanks in Advance !

Hey is this issue resolved

[Aar-if]

@artf Thanks for building such an amazing tool. It is a really exciting and powerful one !

There are not any warning or errors in the console both for the deployed version and in the current code. But as lisited above the API is not being hit in the deployed version if it is written inside components. Ex - refreshContent () listed above.

It only works when i drop it on the editor and not when it loads as a deployed url

If you load stuff from some kind of storage (eg. DB) in your "deployed url", be sure to have a correct remote setup

So as i'm using Node as the backend so do i have to configure it with the editor. As there is an example in Docs regarding grapesJs Firestore.

Kindly help me with issue ... Thanks in Advance !

I am generating a list of data from strapi and using blockly as well in the same component but the component is not executing the blobkly script as grapesjs is binding all the script, what can I do so that the canvas does not bind every script in var items = document.querySelectorAll('#ivi7'); for (var i = 0, len = items.length; i < len; i++) { (function(){.bind(items[i]))();