Shopify App Bridge + Polaris Page Component

Retired Boards Appdev Tools
1

I’m having issues trying to get page actions to show using Shopify App Bridge 0.8.2 and the Polaris Page component (I’ve tried Polaris 2.12.1 and 3.0).

I have my setup something like this.

<AppBridge apiKey="API_KEY" shopOrigin="shop-origin.myshopify.com">
<Page
title="Page Title"
primaryAction={{ content: 'Save', onAction: () => do something }}
>
... content
</Page>
</AppBridge>

I’m getting no errors, but the action and title won’t show up. I’ve tried looking through the source code and making sure the polaris context is available, but can’t figure out where I’m going wrong here. Does anyone have a working example?

2

Hey David,

Thanks for the question! Update the <AppBridge> component to <AppProvider>. We do not offer an <AppBridge> component in Polaris React or, as far as I know, any Shopify library.

<AppProvider apiKey="YOUR_API_KEY">
  <Page primaryAction={{content: 'Save', onAction: () => {console.log('Hello world')}}}>
    {yourContent}
  </Page>
</AppProvider>

And if you are using Polaris React >= v3.0.0 you can omit shopOrigin.

3

Sorry, that was a typo. I am using the AppProvider component. The actions were showing up before I upgraded, but I don’t see any of the Redux actions firing to update the title bar.

4

I’m having a similar issue. Did you ever get it working?

5

Here is even a simpler example, that I expect to work, but it does not. The bridge app.getState() function never returns anything. This was made using create-react-app:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { AppProvider } from "@shopify/polaris";

import App from "./App";

ReactDOM.render(
  <AppProvider apiKey={process.env.REACT_APP_SHOPIFY_API_KEY}>
    <App />
  </AppProvider>,
  document.getElementById("root")
);

App.js

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

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

  async getState() {
    console.log("GET APP STATE");
    let app_state = await this.context.polaris.appBridge.getState();
    console.log("APP STATE", app_state);
  }

  render() {
    this.getState();
    return (
      <Page title="Do you see toast?">
        <p>Check the console. Do you see an App State?</p>
      </Page>
    );
  }
}

export default App;