Using the new @shopify/app-bridge with @shopify/polaris-react

Solved
chadhamre
Shopify Partner
24 2 6

I am unsure how to use the new @shopify/app-bridge and @shopify/polaris together. For example, I have tried to make a React component that will use the app-bridge and polaris to display a toast.

 

import React, { Component } from "react";
import * as PropTypes from "prop-types";
import { Toast } from "@shopify/app-bridge/actions";
import { Page } from "@shopify/polaris";

class Start extends Component {
  static contextTypes = {
    polaris: PropTypes.object
  };

  showToast() {
    console.log("SHOW TOAST");
    console.log(this.context.polaris.appBridge);
    const toastNotice = Toast.create(this.context.polaris.appBridge, {
      message: "Test Toast",
      duration: 5000
    });
    toastNotice.dispatch(Toast.Action.SHOW);
  }

  render() {
    this.showToast();
    return (
      <Page title="Do you see toast?">
        <p>I do not see toast.</p>
      </Page>
    );
  }
}

export default Start;

But it does not seem to dispatch the action. Any ideas on why not? Note that my app is wrapped in the AppProvider and app-bridge is initialized.

 

ReactDOM.render(
  <AppProvider
    apiKey={process.env.REACT_APP_SHOPIFY_API_KEY}
    shopOrigin={queryString.parse(window.location.search).shop}
  >
    <Start />
  </AppProvider>,
  document.getElementById("root")
);

Any ideas on why this doesn't work?

0 Likes
iain-campbell
Shopify Staff
Shopify Staff
54 9 20

Hi Chad! I'm puzzled too; your code looks good. What version of Polaris are you using?

iain-campbell | Developer @ 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 Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
chadhamre
Shopify Partner
24 2 6

Hi Brian, these are my versions:

"dependencies": {
    "@shopify/polaris": "^3.11.0",
    "query-string": "^6.4.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1"
  }
0 Likes
iain-campbell
Shopify Staff
Shopify Staff
54 9 20

Hmmm, I don't see any problems. Two more things to try:

1) Are there any errors or warnings in the console when you run your app in Shopify Admin?

2) Follow our documentation on using the Redux DevTools and let me know what you see when the app loads.

iain-campbell | Developer @ 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 Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
chadhamre
Shopify Partner
24 2 6

One warning in the console:

[bugsnag] notify endpoint is set but sessions endpoint is not. No sessions will be sent.

Screen Shot 2019-04-03 at 2.21.01 PM.png 

0 Likes
chadhamre
Shopify Partner
24 2 6

And no sign of my toast action in Redux Dev Tools:

Screen Shot 2019-04-03 at 2.20.39 PM.png

0 Likes
hannachen
Shopify Staff
Shopify Staff
49 8 14

Hi Chad, Hanna here taking over for Iain while he's away.

 

The code in your OP looks to be correct, I'm curious about the reason behind using the `Toast` action from App Bridge vs `Feedback indicators` from Polaris (https://polaris.shopify.com/components/feedback-indicators/toast#section-use-in-an-embedded-applicat...). The difference between the two can be a bit confusing, and I was wondering if there was a particular reason for using the `Toast` action?

 

Another question I have is whether you have `@shopify/app-bridge` in your `package.json`?

0 Likes
chadhamre
Shopify Partner
24 2 6

Hi Hanna. I'm just using the `Toast` as a way of proving that the app-bridge is working. Is there another App-Bridge action I should test?

0 Likes
chadhamre
Shopify Partner
24 2 6

My dependencies:

 

"dependencies": {
    "@shopify/app-bridge": "^1.2.0",
    "@shopify/polaris": "^3.11.0",
    "query-string": "^6.4.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1"
  }
0 Likes
hannachen
Shopify Staff
Shopify Staff
49 8 14

I see! In that case, could you please confirm that `@shopify/app-bridge` is in your `package.json`?

0 Likes