Polaris-react: Embedded app, Polaris, react router, clicking on app name in the top bar causes full reload

[jbasko]

(I have updated this numerous times and have deleted the now obsolete comments)

I have spent two days trying to understand how exactly navigation works with AppBridge, breadcrumbs, history in combination with react router, all that. In the end it boils down to one issue - when I click on the name of the app in the top left corner (not the icon, but the name of the app; I imagine icon is meant to do a full reload) all of the app iframe reloads even if I happen to be in the home page of the app.

On my way there, I had some road blocks due to me not reading documentation too carefully. It would be nicer if there was some clearer, more visual separation of what applies to what kind of apps in the documentation (embedded/standalone, polaris/non-polaris). I had completely missed the documentation on https://polaris.shopify.com/components/structure/app-provider#section-initializing-the-shopify-app-bridge and I have been trying to work with a programmatically initialised AppBridge instance as documented in https://help.shopify.com/en/api/embedded-apps/app-bridge/initialization
The warning in the latter says Polaris 3.0 although it probably should say Polaris 3.0+

Also, in the documentation I haven't seen any mention of https://www.npmjs.com/package/@shopify/react-shopify-app-route-propagator which appears to solve a critical piece of the puzzle to make back and forward buttons work correctly. I ended up reverse engineering the same thing only to discover this library mentioned in Stack Overflow after I had already nailed it.

I tried many different things to tell the main window that it is already in the home page of the app (basically sending History replace actions with path "" and "/") but with no effect - the app would still reload completely if I hit the name of the app from anywhere but the homepage itself. I tried listening to the app actions, but I don't see a way to tell the app to not proceed with a reload.

Is this by design?

When I inspect Redux developer tools I can see that hitting on the home page link causes APP::NAVIGATION::REDIRECT::APP with updateAction's payload.path set to empty string, not / and that makes me wonder if it is causing the full reload.

Specifications

• Are you using the React components? Yes
• Polaris version number: 3.6.0, App Bridge 1.0.7
• Browser: Chrome Version 71.0.3578.98
• Device: iMac
• Operating System: OS X

[probot-shopify[bot]]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[dpersing]

Hi @jbasko! Thanks so much for your comments, and working through the docs. I've reached out to our documentation team about clarifying the Polaris versions mentioned in the API docs, as well as started a conversation in the Polaris team about clarifying the role of the app provider component.

To answer your question about redirecting, the behavior you're looking for is currently a feature on the App Bridge team's roadmap. Since it's related to App Bridge and not Polaris, I'm going to close this issue for now, but they may be able to comment further once that feature is in development.

[jbasko]

Thank you for taking the time to look into this and for revealing that it's in the roadmap.

Is there an App Bridge issue tracker? I have seen a few issues on this project dismissed as App Bridge issues.

[danrosenthal]

This seems related to the fact that the embedded title bar does not use the Link component that is provided through the AppProvider component. That could be the cause of these clicks causing a full page reload with ReactRouter. I'm pinging @Shopify/app-bridge on this, as that is something that would need to be fixed in the Shopify admin

cc: @gf3

[jbasko]

I'm quite a beginner to all this, but I would be surprised if linkComponent actually applied to the title because that would mean I as an app developer would be able to inject something in the main window running on Shopify domain. I think it has to be something via App Bridge actions instead.

[iainmcampbell]

Hi @danrosenthal @jbasko! We’ve been looking into this issue and I think we’re close to a solution. The problem is that changing the URL of an iframe from outside of the iframe (ie via the breadcrumb menu) always causes the frame to reload. We’re developing a mechanism to avoid that hard reload. Unfortunately there isn’t a public App Bridge issue tracker, so we’ll update you here when it’s released.

[vividviolet]

Specifying custom behaviour for app redirects is now possible https://github.com/Shopify/polaris-react/pull/1349

[vict-shevchenko]

@jbasko Thanks a lot for such an investigation. Really struggling to align iframe navigation with parent window one.

Can please someone advise, if I use:

const redirect = Redirect.create(this.context.polaris.appBridge);

redirect.dispatch(
    Redirect.Action.APP,
    '/edit-products',
);

will this always reload an iframe?

The same I observe when using url prop on PageActions or Button

[vividviolet]

@vict-shevchenko performing an app redirect will always reload the iframe unless you override the default behavior with your own handler. Check out the code snippet here for specifying a custom redirect handler: https://github.com/Shopify/polaris-react/pull/1349

[vict-shevchenko]

Thanks a lot for your advice. As I see this covers a case of pushing Parent window location change - to the embedded app without a reload of the iframe.

@vividviolet, excuse me, one last question. If I need a single page experience (no reload) of embedded application I should use something like Link from ReactRouter to navigate inside and propagate inner iframe url changes to the parent with @shopify/react-shopify-app-route-propagator? Is this the right strategy?

[gf3]

@vict-shevchenko correct, i would use @shopify/react-shopify-app-route-propagator for your single-page app