如何通过@Shopify/polaris-react使用新的@Shopify/app-bridge

Question

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

例如，我曾尝试制作一个React组件，它将使用app-bridge和polaris来显示吐司。

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

因此，经过大量的调试，我发现在App Bridge内部，在采取任何行动之前，他们会检查localOrigin是否与appURL匹配(在合作伙伴仪表板中输入的one)。在我的例子中，我有一个后端( heroku上的node.js用于身份验证)和一个前端(firebase上的react bundle )我的应用程序通过点击后端启动，然后如果身份验证通过，它会重定向到前端。因此localOrigin不匹配...嗯，我很高兴弄明白了这一点，因为我为此失眠了很多。现在的问题是该怎么做……也许这是可以用AppBridge更新的东西？或者有没有我应该考虑的更好的设计？

Answer 2

现在有了@shopify/app-bridge-react，

https://www.npmjs.com/package/@shopify/app-bridge-react

Shopify应该还没有相关的文档...但是，有人可以更新我的答案，当他们出来的时候。:)

注意：一定要有，static contextType = Context;才能访问this.context，以便分派组件中的操作/等。

(希望这能省去你的痛苦哈哈，我不是React开发人员，所以，是的……这在示例中没有被标记为“关键”或任何东西)。

我也想解决@SomethingOn的评论，但我没有足够的名气来评论……

实际上，您可以调试iframe。在chrome dev工具中，在顶部显示" top“的地方，你可以实际选择一个你想要调试的框架。

https://stackoverflow.com/a/8581276/10076085

一旦你选择了Shopify App iframe，输入"window.location“或者你想要的任何东西！

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