How to retrieve message from postMessage ?

[FlorianRuen]

Hello there,

I'm new user of Retool (just a week ago), and I want to display a custom loading component, while the react-retool is loading. To do this, I'm looking to send a message when all the requests are loaded, so my react application, can change a loadingState from true to false or something else

The postMessage seems working, but I can't retrieve the message on my react application

  onRetoolDataReceived = event => {
    console.log('Data from Retool');
    console.log(event.data);
  };

<Retool
  url=[APP]
  onData={this.onRetoolDataReceived}
  data={{
    from: 'YYYY-MM-DD',
    to: 'YYYY-MM-DD',
  }}
/>

In this case, the function is called, because I see the first console.log, but for the second one, nothing is displayed The message I send in postMessage function is

parent.postMessage(
     {
          type: "REQUEST_FINISHED",
          name: 'request_1',
          id: 'request1_loaded',
          loadingTime: '12ms',
     },

     [MY_APP_PUBLIC_URL]
)

Any ideas ?

[ftoyoshima]

I'm struggling with the same problem. Did you manage to find a solution?

[kentwalters]

@FlorianRuen as a test, can you try posting your message with a wildcard as the second argument?

parent.postMessage(
     {
          type: "REQUEST_FINISHED",
          name: 'request_1',
          id: 'request1_loaded',
          loadingTime: '12ms',
     },
    '*'
)

[kentwalters]

If that doesn't do it, would you please share the version of Retool and the version of react-retool you're using?

[FlorianRuen]

@ftoyoshima I haven't found a solution to date, so I was doing with a classic loader on the iFrame but the rendering was not terrible, because the loader disappeared before the end of the iFrame loading

@kentwalters It's not working,

I add a new query that run a JS script (with content in your message) But in my app console with onData, I can see every message when an iFrame param change

But my custom message from postMessage isn't displayed here (and a notification display query successfully run, so I can confirm the postMessage is executed on Retool side)

For the react-retool version, I'm using v1.4.0, which seems to be the latest

[kentwalters]

@FlorianRuen @ftoyoshima Can you please confirm that in /settings/beta you've enabled "Enabled parent window communication"?

[ftoyoshima]

That's it! This solved the problem! Thanks for the support @kentwalters!

[FlorianRuen]

@kentwalters it's already enabled on my side. So the problem persist

[FlorianRuen]

@ftoyoshima maybe you can post your code or something to try to find the source of my problem ?

[ftoyoshima]

@FlorianRuen, I created a minimal working example here:

https://github.com/ftoyoshima/react-retool-sandbox

The linked Retool App, is basically a button which triggers a JS Query with the following code:

console.log('(Retool internal log is working)')
parent.postMessage('hi!!', '*')

[kentwalters]

@FlorianRuen you can also clone and run this project, which includes a working sample application. Can you try that and let us know what you see?

[FlorianRuen]

@kentwalters not working for me, I got the same : one button that refresh all requests and after trigger a query

console.log('(Retool internal log is working)')
parent.postMessage('hi!!', '*')

And on my app side, I got only the message generic from retool (same as my previous screenshots), but I can't see the "Hi" message appear in my console ...

I can only see when parent date has been updated, one console each time in console. but my custom message doesn't appear inside (i check all message in data object)

[ftoyoshima]

@FlorianRuen, did you try it with my React example? Maybe it is an issue with some React configurations.

[FlorianRuen]

@ftoyoshima Seems working now!

I think it was always working, I thought the postMessage message would appear in the console, along with all the other messages with "Received message from parent" but actually not at all...

maybe I was looking in the wrong place,

but by the way, maybe the text in the console "Received message from parent" doesn't make sense in a sense, if the messages from postMessage are not listed the same way?

This text in the console isn't from my code, but from Retool (can't find occurence in the library), can you see it in the console while the iframe is loading ?