在Shopify客户账户UI扩展中获取file_reference类型元字段URL

问题背景 #

在客户账户UI扩展的OrderStatusBlock.jsx文件中，file_reference类型的元字段返回的是GID格式（如gid://shopify/GenericFile/1234567890），无法直接用于文件下载。需要获取该文件的实际URL、文件名及替代文本，实现下载功能。

注意：你找到的Liquid代码仅适用于Shopify主题开发，在React环境的UI扩展中无法直接使用，需通过GraphQL API查询文件详情。

解决方案 #

通过Shopify UI扩展提供的useApi中的query方法，执行GraphQL查询获取GenericFile的详细信息，具体实现如下：

修改OrderStatusBlock.jsx代码 #

import {
  Button,
  Card,
  InlineStack,
  reactExtension,
  useApi
} from "@shopify/ui-extensions-react/customer-account";
import { useState, useEffect } from 'react';

export default reactExtension(
  "customer-account.order-status.block.render",
  () => <OrderMetafields />
);

function OrderMetafields() {
  const { appMetafields, query } = useApi();
  const metafields = appMetafields.current;
  // 存储文件详情：key为GID，value为文件信息
  const [fileDetails, setFileDetails] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchFileDetails = async () => {
      const fileGids = metafields
        .filter(mf => mf.metafield.type === 'file_reference')
        .map(mf => mf.metafield.value);
      
      if (fileGids.length === 0) {
        setLoading(false);
        return;
      }

      try {
        const response = await query(`
          query GetFiles($gids: [ID!]!) {
            nodes(ids: $gids) {
              ... on GenericFile {
                id
                url
                filename
                alt
              }
            }
          }
        `, { gids: fileGids });

        // 整理查询结果，以GID为键存储
        const details = response.nodes.reduce((acc, file) => {
          acc[file.id] = file;
          return acc;
        }, {});
        setFileDetails(details);
      } catch (error) {
        console.error('获取文件详情失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchFileDetails();
  }, [metafields, query]);

  if (loading) {
    return <Card padding>加载中...</Card>;
  }

  return (
    <>
      {metafields.length > 0
        ? <Card padding>
            <InlineStack gap>
              {metafields.map(metafield => {
                // 仅处理file_reference类型的元字段
                if (metafield.metafield.type !== 'file_reference') {
                  return null;
                }
                const file = fileDetails[metafield.metafield.value];
                if (!file) return null;

                return (
                  <Button
                    kind="primary"
                    key={file.id}
                    onClick={() => window.open(file.url, '_blank')}
                  >
                    {file.filename || '下载文件'}
                  </Button>
                );
              })}
            </InlineStack>
          </Card>
        : ''}
    </>
  );
}

代码说明 #

1. 状态与异步管理：通过useState存储文件详情和加载状态，useEffect触发异步查询
2. GraphQL查询：批量查询所有file_reference元字段对应的文件信息，获取url（文件链接）、filename（文件名）、alt（替代文本）字段
3. 渲染逻辑：
   • 显示加载状态提示
   • 仅渲染file_reference类型元字段对应的下载按钮
   • 点击按钮打开文件URL实现下载，按钮文本优先使用文件名

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