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

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

Какие-либо предложения?

Answer 1

Поэтому после долгих отладок я обнаружил в Shopify, что в App Bridge, прежде чем предпринимать какие-либо действия, они проверяют, что localOrigin соответствует appURL (тот, который введен на панели партнеров). В моем случае у меня есть бэкэнд (node.js на heroku, используемый для аутентификации) и внешний интерфейс (комплект реагирования на firebase), мое приложение запускается нажатием на бэкэнд, а затем, если аутентификация проверяется, оно перенаправляется во внешний интерфейс. И, следовательно, 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 вверху, где написано "сверху", вы можете выбрать фрейм, который хотите отладить.
/questions/6023772/otladka-frejmov-s-pomoschyu-instrumentov-razrabotchika-chrome/6023789#6023789

Как только вы выберете iframe приложения Shopify, введите "window.location" или что угодно!

Документы и примеры Shopify ограничены, и я сам сталкиваюсь с кучей проблем, работая над приложением Shopify, поэтому я просто хочу как можно больше распространить помощь!

Answer 3

Можно использовать App Bridge с Polaris:

App Bridge React полностью совместим с Polaris. Чтобы использовать оба вместе, оберните свое приложение в оба устройства Polaris. <AppProvider> компонент, а также App Bridge React <Provider> составная часть.

Следующий пример взят из проекта нового узла, созданного с помощью интерфейса командной строки приложения Shopify:

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import App, { Container } from "next/app";
import { AppProvider } from "@shopify/polaris";
import { Provider } from "@shopify/app-bridge-react";
import Cookies from "js-cookie";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";

const client = new ApolloClient({
  fetchOptions: {
    credentials: "include",
  },
});
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const shopOrigin = Cookies.get("shopOrigin");
    return (
      <Container>
        <AppProvider i18n={translations}>
          <Provider
            config={{
              apiKey: API_KEY,
              shopOrigin: shopOrigin,
              forceRedirect: true,
            }}
          >
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </Provider>
        </AppProvider>
      </Container>
    );
  }
}

export default MyApp;

Обратите внимание, что App Bridge <Provider> завернутый Polaris ' <AppProvider>.