3

I'm using Next.js with Polaris (from following their guide here). Using Link component imported from either Polaris or Next.js is not updating the url in the embedded app.

While the url path doesn't change, the view does change correctly (i.e. the component for the new path does render). Same result with breadcrumbs and url prop for ResourceList.

Is this expected behavior?

Julian Flynn
  • 318
  • 1
  • 2
  • 8

1 Answers1

2

Ended up figuring this out after many variations of trying to make links work correctly.

Answer: no, that's not expected behavior and links should change url path for Shopify embedded apps.

For Polaris, in order to make links change the URL you will need to install this library (@shopify/react-shopify-app-route-propagator). There is enough instructions on the page to figure out how to install it.

Important note on library usage: AppProvider had to be in the parent component for this.context.polaris.appBridge to work correctly. All the logic for context needed to be in a child component. This issue might've been unique to just my case, but maybe not.

Julian Flynn
  • 318
  • 1
  • 2
  • 8
  • Where did you see this library mentioned? I have been fighting with the app URLs for days now. – jbasko Feb 10 '19 at 12:11
  • 1
    For me this library doesn't seem to help with anything. At the moment I am manually calling replace on AppBridge's history every time a route changes, but what I still can't get to work is the home page button (the breadcrumb that has the app name). It causes a full page reload. I'm suspecting it's because it points to path "", not "/". – jbasko Feb 10 '19 at 13:49
  • Well, after reading their code I see they are doing exactly what I was, maybe in a bit more sophisticated way as they don't require to attach any custom listeners to links, but just handle the thing on component mount/update. This doesn't solve my problem of full page reload when I click on the app name though :( – jbasko Feb 10 '19 at 14:04
  • If you don't mind sharing your code I might be able to tell you why it isn't working. It is a small library so doing it yourself is also an option like you outlined. I do not get full page reload when clicking app name either. – Julian Flynn Feb 10 '19 at 16:01
  • When you click on app name do you not have a full page reload? – jbasko Feb 10 '19 at 16:02
  • No, I do not get a page refresh. Here's example boilerplate Shopify Koa app I'm building to use as reference for future projects, this may be useful to you: https://github.com/juliantrueflynn/shopify-koa-app-example (use the complete-app directory example). Note: in local dev it takes a moment for url to change and you will see component render before url changes. – Julian Flynn Feb 10 '19 at 16:11
  • Thanks for sharing the code. I don't think it's anything I can control with the code on my side. The parent window where the button lives says the frame is to be reloaded and so it is. All I can see from my embedded app's frame is the unload event. If I subscribe to AppBridge actions I see there's an APP::NAVIGATION::REDIRECT::APP action, but I can't do anything about it. – jbasko Feb 10 '19 at 16:54
  • Oh sorry, I was assuming you were using the embedded app, which is the only thing I've worked with Shopify's API. – Julian Flynn Feb 10 '19 at 16:58
  • I am building an embedded app. – jbasko Feb 10 '19 at 16:59
  • Then you don’t use app bridge actions. Embedded app has directive ways of handling links (if I understand what you are doing). If you share code you are working with I can take a look any maybe help out. – Julian Flynn Feb 10 '19 at 17:04
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188192/discussion-between-jbasko-and-julian-flynn). – jbasko Feb 10 '19 at 18:50
  • @jbasko ended up being a very easy fix for my example repo. I was using Polaris `Link` and not React Router's `Link`. Now there's no more full page refresh when clicking links--thank you for bringing up that issue. I now see the title/breadcrumb problem too you brought up. I wrote a ticket to Polaris team to view the issue, if you want to thumbs up or follow the ticket: https://github.com/Shopify/polaris-react/issues/1028 – Julian Flynn Feb 13 '19 at 05:29
  • Cool. On Monday they replied to my ticket and said it’s on their roadmap, not a bug. https://github.com/Shopify/polaris-react/issues/998 – jbasko Feb 13 '19 at 09:43
  • @JulianFlynn can't make it work either, If i use provider from app-bridge-react my polaris components complaint about missing i18n even if i mention them as prop, i tried different kind fo nesting of both bridge and polaris's providers nothing has worked for route propogation with react router. :/ – Zia Ul Rehman Mughal Nov 28 '19 at 06:18