Solved

Polaris App Bridge React Model Question

HunkyBill
Shopify Expert
4845 60 547

I have a button that renders a Modal. The Modal gets is content from a src property pointing to a route in my App. The route renders a simple form, with a Submit button. My questions are:

Once the form submits, and it is success or failure, how do I communicate that to the Modal?

The Modal itself has an onClose handler but this prop is passed on to components that render inside the Modal from the source.

So what is the secret sauce to using a Modal? It seems like a useless Component in the context of rendering content from a src that is dynamic.

Am I barking up the wrong tree here? Are Modals really nothing more than a way to render some content that is static?

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Accepted Solution (1)
hannachen
Shopify Staff
54 8 17

This is an accepted solution.

Thanks for clearing that up for me! It's totally not you, and I don't think you're alone in this. I ran into similar issues in the past when attempting to use unfamiliar components, and I think that we could do a much better job laying out the mental model of App Bridge and how it interacts with other Shopify packages.

For context, we initially wanted to add more capabilities to Polaris by packaging App Bridge features inside of Polaris, but that resulted in a lot of confusion and bloating of the package. That's when App Bridge React is created as way forward, and App Bridge inside of Polaris is to be deprecated. What might be extra confusing is that App Bridge React is currently not getting a lot of love due to the availability of the standalone App Bridge package, so the developer experience for App Bridge React is not up to our standards.

App Bridge - standalone client with actions to allow an app to control components inside of the admin

App Bridge React - a wrapper around the App Bridge client to help with the development of React apps

Polaris - UI component library

Hopefully this helps! With the information that you just clarified, I'm going back to double check the samples that we gave you.

Hanna | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 11 (11)

Trish_Ta
Shopify Staff
58 13 27

Hi Bill,

If all you need to do from the modal route is close the opened modal then the best thing to do is to hook into the underlying App Bridge context.

For example, in your main app:

 

import {_SECRET_INTERNAL_APP_BRIDGE_CONTEXT} from '@shopify/polaris';
import {Modal} from '@shopify/app-bridge/actions';

function MainApp() {
  const [modalOpen, setModalOpen] = useState(false);
  const appBridge = useContext(_SECRET_INTERNAL_APP_BRIDGE_CONTEXT);

  useEffect(() => {
    return appBridge.subscribe(Modal.ActionType.CLOSE, () => setModalOpen(false));
  }, []);

  return (
      <Page
        title="My page title"
        primaryAction={{
          content: 'Open modal',
          onAction: () => {
            setModalOpen(true);
          },
        }}
      >
        <Modal
          open={modalOpen}
          title="This is an iframe modal"
          src="/modalForm"
          onClose={() => {
            setModalOpen(false);
          }}
        />
      </Page>
  );
}

 

And then in the modal route:

 

import {_SECRET_INTERNAL_APP_BRIDGE_CONTEXT} from '@shopify/polaris';
import {Modal} from '@shopify/app-bridge/actions';

function ModalPage() {
  const appBridge = useContext(_SECRET_INTERNAL_APP_BRIDGE_CONTEXT);
  const handleSubmit = useCallback(() => {
    // Handle your submit action here

    // Close the modal
    appBridge.dispatch(Modal.closeModal());
  }, []);

  return (
    <Form onSubmit={handleSubmit}>
      <Button submit>Submit</Button>
    </Form>
  );
}

 

If you need to communicate the success/failure status to your main app, that requires something different which I could walk you through.

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

HunkyBill
Shopify Expert
4845 60 547

Is this real code?

import {_SECRET_INTERNAL_APP_BRIDGE_CONTEXT} from '@shopify/polaris';

I am willing to try this the next time I run into that pattern, and I want to improve my patterns!

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Trish_Ta
Shopify Staff
58 13 27

Yes, this is from the docs: https://polaris.shopify.com/components/structure/app-provider#section-access-to-the-shopify-app-brid... 

The caveat is that using App Bridge through Polaris is deprecated and is not kept up to date. If you plan to use this in the future you can switch to `app-bridge-react`:https://shopify.dev/tools/app-bridge/react-components#using-app-bridge-with-polaris

One thing to keep in mind is that using the Polaris non-embedded Modal does not render a Modal with an overlay that covers the entire browser window. Users can still click on buttons in the side bar, title bar, and navigate away from the modal while it's opened. Using a Modal from App Bridge will give you a Modal that covers the entire browser window.

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

HunkyBill
Shopify Expert
4845 60 547

Ack thpffft...

 

I am using App Bridge React for all I can. The Modal in App Bridge React does not work like the other one. It has no Modal.section. So that whole working pattern is out the window. So now if I want to go back to using Modal from App Bridge React, where I fill in the content using the src prop, I can do that, but inside that src component I have to get the context of the App Bridge, and using that context, I can send the Modal the open/close sesame commands.

 

Seems like a lot of work, but if it is what I need to do, I will do it. I wish there were examples of any kind out there. There is literally nothing I could find showing off how to use the App Bridge React Modal for anything, let alone a simple form.

 

Thanks for helping out! Much appreciate it!

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
HunkyBill
Shopify Expert
4845 60 547

By the way.. can I please tell you all something on the Polaris team. While I love it, I cannot for the life of me understand it. You want a simple explanation of why I cannot use this library without feeling like a complete tool?

 

What does this even mean?

As of v3.17.0, using the Shopify App Bridge instance in context is deprecated. Support for this will be removed in v5.0 as the underlying Shopify App Bridge library will be removed from Polaris React. More information can be found here. Use the Shopify App Bridge directly instead.

I am using App Bridge React. It is being deprecated. Everything is deprecated. So use App Bridge React. GAHHH!!! What is going on. Could someone please explain. You tell me to use the context of the App Bridge, yet these very docs tell me doing that is soon be GONE DADDY GONE, to be replaced by using App Bridge React, which I am using.

 

WHAT THE HECK? Does anyone actually know what all that means, in english? (or french, spanish, german, japanese, whatever...)...

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
hannachen
Shopify Staff
54 8 17

👋 Hi @HunkyBill, Hanna here from the App Bridge team stepping in for Trish. It sounds like we might have misunderstood your current setup, and that might be the reason it's not working. To make sure I have it right, you are currently using App Bridge React to interact with the modals, but Polaris for styling?

Hanna | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

HunkyBill
Shopify Expert
4845 60 547

I use Polaris components. Yes. And I use App Bridge React because, well, it makes sense. My embedded Apps need to work with Shopify. So yes. You got it. I don't consider Polaris a Style, but rather a library of React components I can use to build Apps with. And because they come styled, I leave that alone. Until I need to make something more stylish. At which point I use TailwindCSS because it is excellent and matches my needs nicely. Although, due to clashes from Polaris, I often have head scratching moments of WTF when trying do something simple.

If you can help a developer out by explaining the mish-mash of Polaris and App Bridge React and how to move forward in 2020, I would love to read something that really explains it all. Because the current explanations just blend together into a lalalalalalalala moment for me. And I am not super dumb (at least I think I am not super dumb).

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
hannachen
Shopify Staff
54 8 17

This is an accepted solution.

Thanks for clearing that up for me! It's totally not you, and I don't think you're alone in this. I ran into similar issues in the past when attempting to use unfamiliar components, and I think that we could do a much better job laying out the mental model of App Bridge and how it interacts with other Shopify packages.

For context, we initially wanted to add more capabilities to Polaris by packaging App Bridge features inside of Polaris, but that resulted in a lot of confusion and bloating of the package. That's when App Bridge React is created as way forward, and App Bridge inside of Polaris is to be deprecated. What might be extra confusing is that App Bridge React is currently not getting a lot of love due to the availability of the standalone App Bridge package, so the developer experience for App Bridge React is not up to our standards.

App Bridge - standalone client with actions to allow an app to control components inside of the admin

App Bridge React - a wrapper around the App Bridge client to help with the development of React apps

Polaris - UI component library

Hopefully this helps! With the information that you just clarified, I'm going back to double check the samples that we gave you.

Hanna | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

HunkyBill
Shopify Expert
4845 60 547

I can only hope the App Bridge React project gets some support. My investment in Polaris and App Bridge has been significant, and when I run into walls at such basic levels, it scares me! And then the solution turns out to be pretty simple.

So I am left with the problem that Modal in Polaris does not work so well in App Bridge, but App Bridge React Modal, which works better, has no support for what I need to do, unless I use deprecated code which means in Polaris v5.0 suddenly my hack is done for?

Still so confused about why suddenly everything is deprecated and what does that mean! Would be nice to see a well-explained roadmap helping us in that domain to see where it all going.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
hannachen
Shopify Staff
54 8 17

I'll attempt to clarify some of the roadblocks you've encountered:

import {_SECRET_INTERNAL_APP_BRIDGE_CONTEXT} from '@shopify/polaris';

Above is how to get the App Bridge context in Polaris prior to its removal, but for some reason it didn't work for me either when using earlier versions of Polaris 😕

 

If you're looking to access the app inside App Bridge React, you could do something like this:

 

import { Context } from '@shopify/app-bridge-react';

 

then inside your component:

 

const appBridgeContext = useContext(Context);

 

I'm not sure where this is documented, it might not be surfaced or written at all, because I ended up finding it here: https://github.com/Shopify/polaris-react/issues/1798 If that's the case, apologies for our docs have failed you 😰

Hanna | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

HunkyBill
Shopify Expert
4845 60 547

I met with success by using the Modal.section as a child of the Modal. I saw that only by luck, as another answer in the forums. So I just built my form in the Modal.section, and thus I was able to trigger the close after success. It seems to be the pattern that works, although it really messed up my nice clean commponents from BEFORE Modal.

My use case came from the client. They used Polaris Sketch kit to diagram their onboarding wish list, which involved the merchant filling in a simple login to connect. When I tried using the App Bridge React Modal, all my trouble started. Switching or using plain Modal from App Bridge was not obvious to me either as I see zero examples of Modal.sections anyway. Lucky for me that old forum post was around!

As for trying to hoist context around, that let me down the rabbit hole. I had no success, mostly as I do not understand the underpinnings of App Bridge at all. I am just trying to use Polaris React, never mind reverse-engineering it just to use it.

Thanks for responding to my plea! I was very close to just throwing in the towel and telling the client their wishes were outside the abiiity of current Polaris.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com