Shopify GraphQL如何单次查询MetaObject及子MetaObject？

使用Shopify Hydrogen搭建网站时，通过GraphQL访问MetaObject，当前MetaObject包含普通字段和可复用的子MetaObject。已实现获取主MetaObject的字段，但无法获取子MetaObject的内部内容，当前查询仅返回子MetaObject的gid。希望通过单次查询同时获取两者的字段，若无法实现，需了解在Remix中如何避免多次调用Shopify。

当前查询语句：

query {
    metaobject(
        handle: {
            handle: "template-home",
            type: "header_template",
        }
    ) {
        handle,
        type
        page_url: field(key: "page-url") {
            value
        },
        header_info: field(key: "header_info") {
            value
        },    
    }
}

返回结果：

{
    "data": {
        "metaobject": {
            "handle": "template-home",
            "type": "header_template",
            "page_url": {
                "value": "/"
            },
            "header_info": {
                "value": "gid://shopify/Metaobject/1234567890"
            }
        }
    }
}

1. 单次GraphQL查询获取子MetaObject字段 #

Shopify的GraphQL API支持通过referencedMetaobject字段嵌套查询关联的子MetaObject，你可以直接在主查询中嵌套子查询，一次性获取所有需要的内容。修改后的查询语句如下：

query {
    metaobject(
        handle: {
            handle: "template-home",
            type: "header_template",
        }
    ) {
        handle,
        type
        page_url: field(key: "page-url") {
            value
        },
        header_info: field(key: "header_info") {
            value
            # 嵌套查询子MetaObject的具体字段
            referencedMetaobject {
                handle
                type
                # 替换为子MetaObject实际需要的字段key
                site_name: field(key: "site-name") {
                    value
                }
                logo_url: field(key: "logo-url") {
                    value
                }
            }
        },    
    }
}

修改后的返回结果会包含子MetaObject的具体字段，示例如下：

{
    "data": {
        "metaobject": {
            "handle": "template-home",
            "type": "header_template",
            "page_url": {
                "value": "/"
            },
            "header_info": {
                "value": "gid://shopify/Metaobject/1234567890",
                "referencedMetaobject": {
                    "handle": "main-header",
                    "type": "header_info",
                    "site_name": {
                        "value": "我的店铺"
                    },
                    "logo_url": {
                        "value": "/cdn/shop/files/logo.png"
                    }
                }
            }
        }
    }
}

注意：referencedMetaobject仅对类型为MetaObject引用的字段生效，你需要根据子MetaObject的实际字段key调整查询中的字段列表。

2. 若无法嵌套查询，Remix中避免多次调用Shopify的方案 #

如果因API限制无法嵌套查询，可通过以下方式优化：

• Loader内批量查询：在Remix的loader函数中，先获取主MetaObject，拿到子MetaObject的gid后，使用Shopify的批量查询能力一次性获取所有需要的子MetaObject，减少API调用次数。比如通过metaobjects字段批量查询多个ID：

query GetMultipleMetaObjects($gids: [ID!]!) {
    metaobjects(ids: $gids) {
        nodes {
            handle
            type
            fields {
                key
                value
            }
        }
    }
}

• 启用缓存：将获取到的MetaObject数据缓存到Hydrogen的缓存中，后续请求直接读取缓存，避免重复调用Shopify API。示例代码：

import { json } from "@remix-run/node";
import { cache } from "@shopify/hydrogen";

export async function loader({ context }) {
    // 获取主MetaObject
    const mainMetaObject = await context.storefront.query(`
        query {
            metaobject(handle: {handle: "template-home", type: "header_template"}) {
                handle
                type
                page_url: field(key: "page-url") { value }
                header_info: field(key: "header_info") { value }
            }
        }
    `);

    const subMetaObjectGid = mainMetaObject.metaobject.header_info.value;

    // 缓存子MetaObject查询结果
    const subMetaObject = await cache(
        async () => {
            return context.storefront.query(`
                query GetSubMetaObject($gid: ID!) {
                    metaobject(id: $gid) {
                        handle
                        type
                        site_name: field(key: "site-name") { value }
                        logo_url: field(key: "logo-url") { value }
                    }
                }
            `, { variables: { gid: subMetaObjectGid } });
        },
        {
            key: `sub-metaobject-${subMetaObjectGid}`,
            maxAge: 3600, // 缓存1小时
        }
    );

    return json({
        main: mainMetaObject.metaobject,
        sub: subMetaObject.metaobject,
    });
}

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