Shopify应用页面跳转主题编辑器：获取当前活跃主题ID方案

我正在开发一款给Shopify店铺首页新增功能的简易应用，需要在应用说明页添加跳转至主题编辑器的链接。用了App Bridge的Redirect功能，但页面代码里拿不到当前活跃主题的ID，这是我第一次做Shopify开发，求建议。

初始代码（getActiveThemeId暂未实现） #

useEffect(() => {
    const app = createApp(config);
    const themeEditorButton = document.getElementById("theme-editor-button");
    themeEditorButton.addEventListener("click", async () => {
      const themeId = await getActiveThemeId();
      const redirect = Redirect.create(app);
      redirect.dispatch(Redirect.Action.ADMIN_PATH, {
        path: "/themes/"+ themeId +"/editor",
        newContext: false,
      });
    });
  }, []); 

解决方法 #

我用的是Shopify官方提供的应用模板，该模板自带useAppQuery钩子用于调用Admin API，通过这个钩子获取/api/theme/current接口的数据，就能拿到当前活跃主题的ID，最终实现跳转功能，代码如下：

const {
    data: theme,
    isLoading: isLoadingThemeData,
  } = useAppQuery({
    url: "/api/theme/current"
  });

  const goToThemeEditor = () =>{
    const app = createApp(config);
    const redirect = Redirect.create(app);
    redirect.dispatch(
      Redirect.Action.ADMIN_PATH,
      `/themes/${isLoadingThemeData ? "-" : theme.id}/editor`
    );
  }

// 页面按钮部分
<button onClick={goToThemeEditor}>
  {isLoadingThemeData ? "..." : "Edit Theme "+theme.name}
</button>

内容的提问来源于stack exchange，提问作者Bià