Как использовать новый @ Shopify / app-bridge с @ Shopify / polaris-реагировать - PullRequest
Новая
       56

Как использовать новый @ Shopify / app-bridge с @ Shopify / polaris-реагировать

2 голосов
/ 26 марта 2019

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, и 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")
);

Есть предложения?

1 Ответ

0 голосов
/ 13 апреля 2019

Итак, после долгих отладок я обнаружил в Shopify, что внутри App Bridge, прежде чем предпринимать какие-либо действия, они проверяют, что localOrigin соответствует appURL (тот, который введен на панели партнеров).В моем случае у меня есть бэкэнд (node.js на heroku, используемый для аутентификации) и внешний интерфейс (комплект реагирования на firebase), мое приложение запускается нажатием на бэкэнд, а затем, если аутентификация проверяется, оно перенаправляется во внешний интерфейс.И, следовательно, localOrigin не соответствует ... хммм, я очень рад, что понял это, так как я потерял много сна из-за этого.Теперь вопрос в том, что с этим делать ... может быть, это то, что можно обновить с помощью AppBridge?Или есть лучший дизайн, который я должен рассмотреть?

...