Shopify App Bridge only intermittently passes $_GET parameters

[andrebu]

When I try something like (PHP)

app_redirect.dispatch(Redirect.Action.APP, "/order?id=123456789");

• I always see the `?id=12345` in the address bar
• Sometimes the `?id=12345` gets to my page on the backend, sometimes it doesn't. 
• Sometimes clicking the link multiple times does the trick, sometimes it doesn't. 

Is there some way to reliably pass `$_GET` parameters through Shopify App Bridge's Redirect Action?

[Alex]

Hey @andrebu, thanks for the heads up.

We've noticed this on our end too. In my case, I put a button on a view which would initiate the redirect to `/settings?foo=bar`. If I visited my app by its admin url (/admin/apps/app-name) and then clicked the button the parameter would not make it into the app iframe. However, if I then clicked my app name in the top left of the frame and clicked the button again, it would work. Strange stuff.

I've reported this internally and will let you know when it's fixed or I come across any workarounds.

Cheers.

[Alex]

Followup for you, I have a bit of a workaround to share:

While it looks like the redirect action won't work the way we need it to yet, you could perform a redirect from within the iframe with window.location.assign() as an example with the parameters you need. Then, on the route you redirected to, you can make use of History.Action.PUSH to make the window URL reflect the actual parameters (example is written in react, but I think it captures the same idea):

const history = History.create(this.app);
history.dispatch(History.Action.PUSH, `/settings${params_from_earlier}`);

Hope that helps a bit.

Cheers.

[andrebu]

Thank you, Alex, appreciated. 

But I can't get it to work.  I may also be not understanding the solution/workaround.

I have "on click" like so:

var app = createApp({
    apiKey: shopify_api_key,
    shopOrigin: shop_url,
});
var History = actions.History;
var history = History.create(app);

$(document).on("click", ".order-btn", function(){
    var order_id = $(this).attr("data-orderid");
    var order_details_url = "/order?id="+order_id;

    // 1. the below is the original method that fails to pass params
    //app_redirect.dispatch(Redirect.Action.APP, order_details_url);

    // 2. the below throws an error - "history.dispatch is not a function"
    history.dispatch(History.Action.PUSH, order_details_url);

    // 3. the below also only works from console, but throws an error from inside the iFrame
    //window.location.replace(order_details_url);

    // 4. similar with the below - throws iFrame deny error if I forward to full shop.myshopify.com url from inside iFrame
    // but forwards/redirects (properly)  to relative app URL if I assign relative location
    //window.location.assign(order_details_url);
});

... I know there is also the part where on the destination `/order?params` page, I have to receive the params in the workaround, but I think I'm failing to even reach that, and confusing myself/misunderstanding these mechanics.  

Some more explanation of the workaround would be helpful and much appreciated.  

PS/EDIT: When I `console.log(history)` the history object, it outputs this JS object to the browser console:

History {length: 50, scrollRestoration: "auto", state: null}

Notably, it has no methods attached, unlike other objects (eg, `redirect` object is much bigger, with various methods attached).

[Alex]

I was running into issues with history using the CDN version of app bridge as well, and was able to make it work like so:

var History = actions.History;
History.create(app).dispatch(History.Action.PUSH, '/app-bridge/settings?foo=bar');

Just to be clear - all that part does is push your params to the top level window. The params should already be available to you within the iframe at this point via window.location.assign() (the workaround).

Let me know what you think.

[andrebu]

The PHP script needs to see the URL params. 

Am I misunderstanding how this workaround works? 

I am unable to pass the params to my PHP even with the workaround.

And the behavior is exactly as your described: first link click doesn't work (no redirection, though browser window URL changed to the correct URL), then other clicks all work properly with Redirect.Action.

When I try to use window.location.assign("..."), it tries to redirect to https://my_site_host_.com/needed_params_url, rather than forwarding to the shops admin URL.

I think I am completely misunderstanding how iFrames work, or how they're used here, and where the Shopify Bridge API resides, on top of the redirect not working properly.  The API documentation is lacking on these points, and I've been checking back to see if its updated, but nothing so far.  And the redirect is still broken. 

Any chance you can provide a complete example of how to structure front end JS to successfully pass GET parameters to backend PHP or Node/React scripts?

[abdillahalsree]

Have you found the solution to pass the selected parameters to the backend? Im currently facing the same issue..

[andrebu]

Unfortunately I have not.  Should be revisiting it in a couple weeks though, will share if I find something useful.