Not able to use passed data to embedded app

[floodfx]

• Goal: I want to use data passed from parent to embedded app to set an app variable.

• Steps:
  I have a working embedded app that receives data from the parent as documented here: Embed web apps | Retool Docs.

The data being pass is a simple json object (i.e. {email: "foo@example.com}) which I the app queries for successfully using the email as the value of the "Selector" for the parent query.

I've created a "Success Event Handler" that attempts to extract the query.data and set a variable with it via a "Set variable" action.

This set variable does not work. It appears the query.data property is empty.

I can see the debug console that shows the data is received by the app (i.e. "Received message from parent [...]".

What am I missing?

Thanks,
-Donnie

[Jack_T]

Hello @floodfx!

Very odd that the console displays the data from the query but that the set variable step does not run on query success.

Can you share a screenshot of the set variable action not working?

[Tim_Specht]

Did you ever figure this out? Running into the same issue right now - myParentWindowQuery.data is always undefined

[Jack_T]

Hi @floodfx and @Tim_Specht,

I have a couple more questions to try and help troubleshoot this issue.

Are you using the Retool SDK or React Retool?

There are a few subtle differences between the two. If either of you are able to share a screen shot of how you have the component set up so I can see how the data is being passed into the embedded Retool app, that would help me a ton in diagnosing the issue or figuring out what needs to be done on the app side to grab the data.

Our docs on setting up the Parent Window Query are outdated so I will be filing a request to have those improved

It sounds like you entered the correct info into the "Selector" of the parent query, if the query data is empty...then my first guess is that maybe the query is never triggered and thus doesn't have a .data property but just want to double check everything else is set up in the code and in the parent query

[Tim_Specht]

I'm using the react-retool library. I'm initializing the Retool component as seen in the screenshot attached & triple-verified that data is indeed not empty and contains the right items (both by logging it to the console, as well as by just passing in the values directly)

[Jack_T]

@Tim_Specht Thank you for the details and the screen shot!

It looks like you are passing in the data correctly. When you manually run the ParentWindow query in the app does nothing appear? Do you have data currently in the selector?

I believe you would need to pass into the Selector field the key within your data object that you are looking to grab.

It might be an issue where the top level object name is not what the query is expecting and if you have a large amount of data you would just need to nest it one level below so that it is the value attached to a key inside the data prop being given to the Retool React component.

Apologies for the confusion, let me know if this works!

[floodfx]

Finally got back around to working on this and I discovered the issue and work around.

Here is the configuration of my parent window call:

The main success event handler just sets a variable with the result. As you can see, I've also added another success event handler which prints out the data from the parent window query.

First, the default configuration does not receive the data even though the "Parent window received" the "email" selector. Note the "getEmailFromParent" console.log is "undefined" and executes before "Received message from parent".

Next, I go to the advanced tab and run the event handlers after 1 second:

And that is enough time to "fix" things:

So effectively there is a race condition / timing issue between the Parent Window receiving the selector event and setting the data from the query.

Hope that helps.

[floodfx]

I should note the debug on of the Parent window received came from the following:

window.addEventListener(
  "message",
  function (e) {
    console.log("Parent window received: ", e.data);
  },
  false,
);

Doesn't affect the timing issue.

[Jack_T]

Thank you so much for documenting your work around @floodfx!

From your screen shot it looks like you are correct, there are some sort of timing issue, where even though the parent app's window event listener fires off saying that the data payload containing the email has been sent to the Retool app, the console log does not yet have this data to access when the success event handler runs

I apologize this workaround is needed, but that is good to hear the data is being received as we hoped, just that it needs a small delay before the Retool app has the data accessible.

I will reproduce this on my end and show this to our engineers to figure out how we can improve this