CODEWITHSUNDEEP
reactjsshopifypolaris
chadhamre
chadhamre

Reputation: 647

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?

Upvotes: 7

Views: 3814

Answers (3)

shubham jajoo
shubham jajoo

Reputation: 1

For Using Shopify App Bridge with Shopify Polaris you first need to make Your App is embedded in the shopify admin, secondly shopify app bridge package shopify/app-bridge-react is compatible with @shopify/polaris-react not this @shopify/app-bridge.

App bridge is used for communicate your app with shopify admin or shopify api's without need of any type handling API authentication.

For more information you refer the link

Upvotes: 0

Tom
Tom

Reputation: 601

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!

Upvotes: 1

chadhamre
chadhamre

Reputation: 647

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?

Upvotes: 1

Related Questions