How to use the new @Shopify/app-bridge with @Shopify/polaris-react

问题

Shopify recently released their new @shopify/app-bridge, but it is unclear to me how it should be used alongside @shopify/polaris.

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 suggestions?

回答1:

So after a lot of debugging, I found out from Shopify that inside App Bridge, before taking any action, they check that the localOrigin matches the appURL (one that's entered in the partners dashboard). In my case, I have a backend (node.js on heroku used for authentication) and a frontend (react bundle on firebase) my app starts by hitting the backend, and then if authentication checks out, it redirects to the front end. And hence the localOrigin does not match... hmmm, I'm very glad to have figured this out since I lost a lot of sleep over it. Now the question is what to do about it... maybe this is something that could be updated with AppBridge? Or is there a better design I should be considering?

回答2:

There is now @shopify/app-bridge-react,
https://www.npmjs.com/package/@shopify/app-bridge-react

Shopify supposedly doesn't have docs for it yet though... But, someone can update my answer when they come out with them. :)

NOTE: Be sure to have, static contextType = Context; to get access to this.context for dispatching actions/etc in your components.
(Hopefully this saves you days of suffering haha I'm not a React developer, so, yeah... this was not marked as "crucial" or anything in the examples).

I also wanted to address @SomethingOn's comment, but I don't have enough reputation to comment...

You actually can debug an iframe. In chrome dev tools, on top where it says "top", you can actually select a frame that you want to debug.
https://stackoverflow.com/a/8581276/10076085

Once you select the Shopify App iframe, type in "window.location" or whatever you want!

Shopify's docs and examples are limited and I'm running into a bunch of issues myself working on a Shopify App, so I just want to spread help as much as possible!

来源：https://stackoverflow.com/questions/55365784/how-to-use-the-new-shopify-app-bridge-with-shopify-polaris-react

标签

reactjs

shopify

polaris