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

【问题标题】：How to use the new @Shopify/app-bridge with @Shopify/polaris-react如何将新的 @Shopify/app-bridge 与 @Shopify/polaris-react 一起使用
【发布时间】：2019-03-26 20:34:10
【问题描述】：

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 中，并且 app-bridge 已初始化。

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

有什么建议吗？

【问题讨论】：

标签： reactjs shopify polaris

【解决方案1】：

所以经过大量调试后，我从 Shopify 发现，在 App Bridge 内部，在采取任何行动之前，他们会检查 localOrigin 是否与 appURL 匹配（在合作伙伴仪表板中输入的）。就我而言，我有一个后端（heroku 上的 node.js 用于身份验证）和一个前端（firebase 上的反应包），我的应用程序从访问后端开始，然后如果身份验证签出，它会重定向到前端。因此 localOrigin 不匹配......嗯，我很高兴能弄清楚这一点，因为我为此失去了很多睡眠。现在的问题是如何处理它......也许这是可以用 AppBridge 更新的东西？或者有没有更好的设计我应该考虑？

【讨论】：

我也很困惑。我讨厌他们一直引用shopOrigin，但从来没有真正告诉你如何得到它。没有例子，什么都没有。在 iFrame 中加载时，iFrame src 将 shop 作为查询字符串参数包含在内，但 window.location 似乎不存在于 iframe javascript 的范围内？有什么想法吗？

【解决方案2】：

现在有@shopify/app-bridge-react,
https://www.npmjs.com/package/@shopify/app-bridge-react

Shopify 据说还没有文档……但是，当有人提出答案时，他们可以更新我的答案。 :)

注意： 请务必拥有static contextType = Context; 以访问this.context 以在您的组件中调度操作/等。
（希望这可以为您节省几天的痛苦，哈哈，我不是 React 开发人员，所以，是的......这在示例中没有被标记为“关键”或任何内容）。

我也想解决@SomethingOn 的评论，但我没有足够的声誉发表评论...

您实际上可以调试 iframe。在 chrome 开发工具中，在顶部显示“顶部”的位置，您实际上可以选择要调试的框架。
https://stackoverflow.com/a/8581276/10076085

选择 Shopify 应用 iframe 后，输入“window.location”或您想要的任何内容！

Shopify 的文档和示例有限，我自己在开发 Shopify 应用时遇到了一堆问题，所以我只想尽可能多地提供帮助！

【讨论】：