What Happened to App Bridge and Toast?

Retired Boards Appdev Tools
1

I moved an App from Embedded, to NOT Embedded anymore. So it is just not embedded. OK, fine.

For some reason some code that used to work fine to flash a Toast no longer works anymore. I updated to Polaris 6 and App Bridge 1.29 and now Toasts don’t show? What is up? I inspected these parameters and all of them seem to make sense, and so I am wondering what I am doing wrong now. Is this because App Bridge actions do not work unless in an embedded App?

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

const appBridge = useContext(Context);
const statusChangeMessage = {
  message: 'Status Change was Saved',
  isError: false,
};
const toastNotice = Toast.create(appBridge, statusChangeMessage);
toastNotice.dispatch(Toast.Action.SHOW);
2

Hi Bill, you are correct. App Bridge is meant for Embedded Apps. Toast, Modal, TitleBar, etc.. all happen outside of the app, facilitated by App Bridge.

If you would like to use these elements in a non-embedded context, you would need to follow the Polaris docs like so: https://polaris.shopify.com/components/feedback-indicators/toast

3

Thanks! Yes, I am only now realizing everything about App Bridge is just for embedded Apps, and as I move this App from Embedded to non-embedded I have to remove all my code that was dependent on App Bridge. I had no idea so much of my code was tied up in App Bridge!

All better now. My App renders just with outside Shopify with Polaris, and I am now wiring it up to work the same as it was working embedded style.

1 Like