特征

该图书馆具有以下功能:

• 自动启动 OAuth 进程, 使用 Gadget 程序的新用户, 必要时逃离 Shopify 的 iframe
• 使用 Gadget OAuth PKCE 与 Gadget 后端建立 ifram 安全会话
• 为 Gadget 使用后端调用设置正确的反应上下文 @gadgetinc/react

安装

这是为您的 Gadget app 生成的 JavaScript 客户端软件包的配套软件包 。 您必须先为您的应用程序安装 JS 客户端, 然后安装此软件包 .

要为您的应用程序安装JS客户端, 您必须建立 Gadget 国家防范机制注册, 然后安装客户端 :

npm config set @gadget-client:registry https://registry.gadget.dev/npm

yarn add @gadget-client/my-app-slug
# or
npm install @gadget-client/my-app-slug

完整的安装指令可以在 Gadget 文件中找到 https://docs.gadget.dev/api/<my-app-slug>/external-api-calls/installing。 。 。 .

一旦您安装了JS客户端,您就可以安装 React shooks 库和 Shopify App 桥库 yarn 或者说 npm数字 :

yarn add @gadgetinc/react-shopify-app-bridge @gadgetinc/react @shopify/app-bridge-react react
# or
npm install --save @gadgetinc/react-shopify-app-bridge @gadgetinc/react @shopify/app-bridge-react react

目的

在探索 Shopify 嵌入式应用开发时, 您可能已经发现 文档 关于如何建立 Shopify App Bridge。 这个软件包将照顾到涉及OAuth的所有步骤并启动 Shopify app桥. OAuth步骤以及 Shopify 应用程序桥的初始化由 ProviderApp Bridge的初始实例可通过 appBridge 密钥返回自 useGadget。 。 。 .

示例用途

注: 这个例子与在下列文件中发现的例子非常相类似: @ gadgetinc/ 反应但是,如果您使用 @gadgetinc/react-shopify-app-bridge 软件包.

src/api.ts

// replace `my-app-slug` with your app slug from your Gadget app's domain
import { Client, BrowserSessionStorageType } from "@gadget-client/my-app-slug";

export const api = new Client({
  authenticationMode: {
    browserSession: {
      storageType: BrowserSessionStorageType.Temporary,
    },
  },
});

src/app.tsx

// import Gadget's react hooks for accessing data from your Gadget app
import { useAction, useFindMany } from "@gadgetinc/react";
// import the Gadget<->Shopify bindings that manage the auth process with Shopify
import { AppType, Provider as GadgetProvider, useGadget } from "@gadgetinc/react-shopify-app-bridge";
// import and use Shopify's react components like you might in other Shopify app
import { Button, Redirect, TitleBar } from "@shopify/app-bridge/actions";
// import the instance of the Gadget API client for this app constructed in the other file
import { api } from "./api";

export default function App() {
  return (
    // Wrap our main application's react components in the `<GadgetProvider/>` component to interface with Shopify
    // This wrapper sets up the Shopify App Bridge, and will automatically redirect to perform the OAuth authentication if the shopify shop doesn't yet have the store installed.
    <GadgetProvider type={AppType.Embedded} shopifyApiKey="REPLACE ME with api key from Shopify partners dashboard" api={api}>
      <ProductManager />
    </GadgetProvider>
  );
}

// An example component that uses the Gadget React hooks to work with data in the Shopify backend
function ProductManager() {
  const { loading, appBridge, isRootFrameRequest, isAuthenticated } = useGadget();
  const [, deleteProduct] = useAction(api.shopifyProduct.delete);
  const [{ data, fetching, error }, refresh] = useFindMany(api.shopifyProduct);

  if (error) return <>Error: {error.toString()}</>;
  if (fetching) return <>Fetching...</>;
  if (!data) return <>No products found</>;

  // Set up a title bar for my embedded app
  const breadcrumb = Button.create(appBridge, { label: "My breadcrumb" });
  breadcrumb.subscribe(Button.Action.CLICK, () => {
    appBridge.dispatch(Redirect.toApp({ path: "/breadcrumb-link" }));
  });

  const titleBarOptions = {
    title: "My page title",
    breadcrumbs: breadcrumb,
  };
  TitleBar.create(appBridge, titleBarOptions);

  return (
    <>
      {loading && <span>Loading...</span>}
      {/* A user is viewing this page from a direct link so show them the home page! */}
      {!loading && isRootFrameRequest && <div>Welcome to my cool app's webpage!</div>}
      {!loading &&
        isAuthenticated &&
        data.map((product) => (
          <button
            onClick={(event) => {
              event.preventDefault();
              void deleteProduct({ id: product.id }).then(() => refresh());
            }}
          >
            Delete {product.name}
          </button>
        ))}
    </>
  );
}

自定义路由器

@shopify/app-bridge-react 允许您指定自定义路由器配置,以管理客户端路由。 类似地, Gadget 提供者将允许您指定一个自定义的路由器, 该路由器将转发到 App Bridge .

// import Gadget's react hooks for accessing data from your Gadget app
// import the Gadget<->Shopify bindings that manage the auth process with Shopify
import { AppType, Provider as GadgetProvider } from "@gadgetinc/react-shopify-app-bridge";
// import and use Shopify's react components like you might in other Shopify app
import { useMemo } from "react";
// import the instance of the Gadget API client for this app constructed in the other file
import { BrowserRouter, useLocation, useNavigate } from "react-router-dom";
import { api } from "./api";
// import your app's custom routes
import Routes from "./Routes";

function App() {
  const navigate = useNavigate();
  const location = useLocation();
  const history = useMemo(() => ({ replace: (path) => navigate(path, { replace: true }) }), [navigate]);

  const router = useMemo(
    () => ({
      location,
      history,
    }),
    [location, history]
  );

  return (
    // Wrap our main application's react components in the `<GadgetProvider/>` component to interface with Shopify
    // This wrapper sets up the Shopify App Bridge, and will automatically redirect to perform the OAuth authentication if the shopify shop doesn't yet have the store installed.
    <GadgetProvider
      type={AppType.Embedded}
      shopifyApiKey="REPLACE ME with api key from Shopify partners dashboard"
      api={api}
      router={router}
    >
      <Routes />
    </GadgetProvider>
  );
}

export default function AppWrapper() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
}