如何将新的 @Shopify/app-bridge 与 @Shopify/polaris-react 一起使用

Question

Shopify 最近发布了新的@shopify/app-bridge，但我不清楚它应该如何与@shopify/polaris一起使用。

例如，我尝试制作一个 React 组件，它将使用 app-bridge 和 Polaris 来显示 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;

但它似乎并没有派遣行动。有什么想法为什么不呢？请注意，我的应用程序包装在 AppProvider 中，并且应用程序桥已初始化。

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

有什么建议么？

Answer 1

因此，经过大量调试后，我从 Shopify 发现，在 App Bridge 内部，在采取任何操作之前，他们会检查 localOrigin 是否与 appURL（在合作伙伴仪表板中输入的 URL）相匹配。就我而言，我有一个后端（heroku 上的 Node.js 用于身份验证）和一个前端（Firebase 上的 React Bundle），我的应用程序通过点击后端启动，然后如果身份验证通过，它会重定向到前端。因此 localOrigin 不匹配...嗯，我很高兴能弄清楚这一点，因为我为此失眠了很多。现在的问题是该怎么办...也许这可以用 AppBridge 更新？或者我应该考虑更好的设计？