Goal: Retrieve an image URL from a metafield that stores a file reference (e.g., gid://shopify/MediaImage/…).
Update: From API version 2021-10 (released Oct 1), the Admin GraphQL API adds Metafield.reference to resolve file references. Query the product metafield, branch on MediaImage, and read image.originalSrc. Code snippets in the thread demonstrate the exact query and a working response.
Lists: For list.file_reference, use the references connection (plural) and iterate edges → node → … on MediaImage → image.originalSrc. One user noted references returned null initially but later worked, likely an API-side issue.
Docs: Links provided to Metafields overview and type definitions for broader usage.
Liquid (themes): For file reference metafields, append the file_url filter to get the file URL. For page reference metafields, use .value to get the Page object, then output .title and .content.
Open questions: Whether equivalent resolution is available in the Storefront API (asked for headless/Gatsby) remains unanswered. How to adapt the Admin GraphQL approach for order-level metafields is also unanswered.
Workaround (not ideal): Store an image as base64 in a single-line text metafield if API resolution isn’t available.
Status: Admin GraphQL solution confirmed; some platform/API scope questions remain open.
Its very similar but just need to use references instead of reference
{
product(id: "gid://shopify/Product/YOUR_PRODUCT_ID") {
metafield(namespace: "my_fields", key: "image") {
references(first: 10) {
edges {
node {
... on MediaImage {
image {
originalSrc
}
}
}
}
}
}
}
}