Shopify Remix App通过AppProxy调用Storefront API时出现未定义错误

问题现象 #

使用Shopify Remix应用模板开发了一个扩展功能，允许客户通过商店前端与业务后端交互。功能通过路由实现：先请求业务后端，再调用Storefront API。本地运行完全正常，但部署到开发商店后触发以下错误：

TypeError: Cannot read properties of undefined (reading 'graphql')
    at getImageByVariant (/app/build/index.js:583:40)
    at action5 (/app/build/index.js:575:28)
    at Object.callRouteActionRR (/app/node_modules/@remix-run/server-runtime/dist/data.js:35:16)
    at callLoaderOrAction (/app/node_modules/@remix-run/router/router.ts:4020:16)
    at submit (/app/node_modules/@remix-run/router/router.ts:3133:16)
    at queryImpl (/app/node_modules/@remix-run/router/router.ts:3068:22)
    at Object.queryRoute (/app/node_modules/@remix-run/router/router.ts:3018:18)
    at handleResourceRequestRR (/app/node_modules/@remix-run/server-runtime/dist/server.js:296:20)
    at requestHandler (/app/node_modules/@remix-run/server-runtime/dist/server.js:104:18)

环境与配置 #

• Docker容器在云端运行，已正确配置scope、shopify_key、shopify_secret、app_url等环境变量，应用部署状态正常
• 合作伙伴仪表盘中的AppProxy及所有URL均与容器地址一致
• 应用已安装至目标商店，添加app-block到页面并预览时触发错误
• 业务服务器收到的请求日志：oos?shop=*******&logged_in_customer_id=&path_prefix=%2Fapps%2Foos&timestamp=1708522357&signature=dc9b8432b9fb75138d8dd9c9c18e3ae3638c7581c27b19e97973f2ab09cc74a7

核心代码实现 #

路由Action代码 #

import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
const HTV_API_BASE_URL = process.env.HTV_API_BASE_URL

export const action = async ({ request }) => {
  var request_params = await request.json()
  var token = request_params.token

  let data = await fetch(HTV_API_BASE_URL + '/customers/v1/access', {
        method: 'GET',
        headers: {
            'Content-Type': 'multipart/form-data;',
            'X-Htv-User-Token' : token
        }
    }).then(response => {
      return response.json();
  }).catch(error => {
    console.log(error)
    return {
      "status" : "error"
  }
  });

  // 若获取到正确数据，用Shopify数据增强数据集
  if (!!data && data.status == "OK") {
    let main_product = data.token_data.data.proposed_changes
    console.log(main_product)
    console.log(main_product.alternative)
    console.log(main_product.alternative.molecule_group)
    main_product.imageUrl =  await getImageByVariant(request, main_product.shop_identifier)
    main_product.molecule_group = main_product.alternative.molecule_group

    let alternative = main_product.alternative
    alternative.imageUrl =  await getImageByVariant(request, alternative.shop_identifier)
  }
  return data;
}

async function getImageByVariant(request, variant_id) {
  // 从Shopify获取图片URL
  const { storefront } = await authenticate.public.appProxy(request);
  try {
    var shopify_variant_id = "gid://shopify/ProductVariant/" + variant_id
    const response = await storefront.graphql(
      `#graphql
        query($id: ID!) {
          node(id: $id) {
            ... on ProductVariant {
              id
              product {
                featuredImage {
                  url
                }
              }
            }
          }
        }`,
      {
        variables: {
          "id" : shopify_variant_id
        },
      },
    );

    let data =  await response.json();
    return json({
      "image_url" : data.data.node?.product?.featuredImage?.url
    });
  }
  catch (error) {
    console.log(error)
    return json({
      "image_url" : null
    });
  }
};

TOML配置（AppProxy与权限范围） #

[app_proxy]
url = REDACTED FOR SAFETY
subpath = "oos"
prefix = "apps"

[access_scopes]
scopes = "read_products,unauthenticated_read_product_listings"

已尝试的排查动作 #

• 重新安装应用到目标商店
• 重新部署云端服务器
• 本地使用相同配置（仅修改URL）运行正常，部署后问题未解决

内容的提问来源于stack exchange，提问作者Theodor Freund