⚛

【Shopify.dev和訳】App Bridge/React components/Provider

2021/09/05に公開

React

Shopify

apps

tech

この記事について

この記事は、App Bridge/React Component/Provider の記事を和訳したものです。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

Provider

セットアップ

@shopify/app-bridge-react からProviderをインポートします。お客様のアプリケーションに必要なProviderは 1 つだけです。

import React from "react"
import ReactDOM from "react-dom"
import { Provider, Loading } from "@shopify/app-bridge-react"

function MyApp() {
  const config = { apiKey: "12345", host: host }
  return (
    <Provider config={config}>
      <Loading />
    </Provider>
  )
}

const root = document.createElement("div")
document.body.appendChild(root)
ReactDOM.render(<MyApp />, root)

プロップス

名前	タイプ	説明	必須
config	AppConfig	あなたのアプリケーション構成	Yes

AppConfig

名前	タイプ	説明	必須
apiKey	`string`	Shopify Partner Dashboard からの API キー	Yes
host	`string`	現在のショップのホスト名です。詳細はこちら	Yes
forceRedirect	`boolean`	Shopify Admin 内でアプリが開かれていない場合、Shopify Admin へのリダイレクトをトグルするために使用する。デフォルトは `true` です。

App Bridge React と Polaris の併用

App Bridge React は Polaris と完全な互換性があります。両者を併用するには、Polaris の<AppProvider>コンポーネントと App Bridge React の<Provider>コンポーネントの両方でアプリを包みます。

import React from "react"
import ReactDOM from "react-dom"
import { Provider, Loading } from "@shopify/app-bridge-react"
import { AppProvider, Card } from "@shopify/polaris"

function MyApp() {
  const config = { apiKey: "12345", host: host }
  return (
    <AppProvider>
      <Provider config={config}>
        <Loading />
        <Card />
      </Provider>
    </AppProvider>
  )
}

const root = document.createElement("div")
document.body.appendChild(root)
ReactDOM.render(<MyApp />, root)

App Bridge クライアントに直接アクセスする

App Bridge React は、React Context API を使用して App Bridge クライアントappのインスタンスへのアクセスを提供します。コンテキスト API を使用するには、useAppBridge、useContext、Context.Consumer、Class.contextType の 4 つの方法があります。

useAppBridge フックは、バージョン 1.25.0 以上で利用可能です。useAppBridge フックを使用すると、機能コンポーネント内の App Bridge クライアントappに素早くアクセスできます。

useAppBridge フックが利用できない 1.25.0 以下の App Bridge のバージョンを使用している場合は、React の useContext フックを直接使用してください。

Context.Consumer を使用して、レンダープロップ内の App Bridge クライアントappへのアクセスを取得します。

クラスコンポーネント内の App Bridge クライアントappへのアクセスを取得するには、Class.contextType を使用します。

import React from "react"
import { Provider, useAppBridge } from "@shopify/app-bridge-react"

function MyFunctionalComponent() {
  const app = useAppBridge()

  return (
    <div>
      {(app) => {
        // Do something with App Bridge `app` instance...
        if (app) {
          app.getState().then((state) => console.log(state))
        }

        return <span>Hello world!</span>
      }}
    </div>
  )
}

function MyApp() {
  const config = { apiKey: "12345", host: host }

  return (
    <Provider config={config}>
      <MyFunctionalComponent />
    </Provider>
  )
}

const root = document.createElement("div")
document.body.appendChild(root)
ReactDOM.render(<MyApp />, root)

Shopify アプリのご紹介

Discussion

ログインするとコメントできます