-
Notifications
You must be signed in to change notification settings - Fork 264
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Parse Metaobjects Utility #1621
Conversation
We detected some changes in |
TBH I'd like to take this even further … or at least provide some options … Like most of the time you're just looking for as simple a data shape as possible. Given this query, for a section of a page I was working on … query Spotlight(
$country: CountryCode
$handle: String!
$language: LanguageCode
) @inContext(country: $country, language: $language) {
product(handle: $handle) {
spotlight: metafield(namespace: "section", key: "spotlight") {
reference {
... on Metaobject {
title: field(key: "title") {
value
}
featuredImage: field(key: "featured_image") {
reference {
... on MediaImage {
image {
altText
width
height
url
}
}
}
}
sale: field(key: "sale") {
value
}
bgColor: field(key: "background_color") {
value
}
product: field(key: "product") {
reference {
... on Product {
handle
title
variants(first: 1) {
nodes {
availableForSale
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
image {
id
altText
height
width
url
}
}
}
}
}
}
}
}
}
}
}`; I'd get the following response… {
"data": {
"product": {
"spotlight": {
"reference": {
"title": {
"value": "Builder Tote"
},
"featuredImage": {
"reference": {
"image": {
"altText": null,
"width": 1460,
"height": 1478,
"url": "https://cdn.shopify.com/s/files/1/0657/3811/3197/files/spotlight-image-home-2.jpg?v=1716832296"
}
}
},
"sale": {
"value": "true"
},
"bgColor": {
"value": "Light Gray"
},
"product": {
"reference": {
"handle": "get-ship-done-hat-2-1",
"title": "Get Ship Done Hat 2.0",
"variants": {
"nodes": [
{
"availableForSale": true,
"price": {
"amount": "15.0",
"currencyCode": "CAD"
},
"compareAtPrice": null,
"image": {
"id": "gid://shopify/ProductImage/34706198692013",
"altText": "A close up view of the front of a black Shopify Supply baseball cap with text \"Ship It\" stitched in white.",
"height": 1000,
"width": 1000,
"url": "https://cdn.shopify.com/s/files/1/0657/3811/3197/files/01-GSD-Hat-PDP.webp?v=1716828182"
}
}
]
}
}
}
}
}
}
},
"extensions": {
"context": {
"country": "CA",
"language": "EN"
}
}
} All I really need / would like is a data shape like this … {
"spotlight": {
"title": "Builder Tote",
"featuredImage": {
"altText": null,
"width": 1460,
"height": 1478,
"url": "https://cdn.shopify.com/s/files/1/0657/3811/3197/files/spotlight-image-home-2.jpg?v=1716832296"
},
"sale": true,
"bgColor": "Light Gray",
"product": {
"handle": "get-ship-done-hat-2-1",
"title": "Get Ship Done Hat 2.0",
"variants": [
{
"availableForSale": true,
"price": {
"amount": "15.0",
"currencyCode": "CAD"
},
"compareAtPrice": null,
"image": {
"id": "gid://shopify/ProductImage/34706198692013",
"altText": "A close up view of the front of a black Shopify Supply baseball cap with text \"Ship It\" stitched in white.",
"height": 1000,
"width": 1000,
"url": "https://cdn.shopify.com/s/files/1/0657/3811/3197/files/01-GSD-Hat-PDP.webp?v=1716828182"
}
}
]
}
}
} So …
I understand some value in wanting to opt into more data — for example if you need to do specific logic based on the value type, for instance. So maybe that could be an argument? |
@benjaminsehl I like that. I say we simple it down to make it as easy as possible. People can always use the raw response if they need extra metadata. |
@benjaminsehl I agree with you, thats what I'm currently doing! |
Going to be implemented in another PR |
Overview
Create a utility function that helps users parse metaobject fields. Speed up development processes by helping users move more quickly from metaobject graphql queries to being able to consume the data in their app.
Current Approaches
Right now its common for teams/project to create their own utilities to parse the metaobject query response. Mainly so they can attach field keys directly to their parsedValues. It would be nice to standardize and provide it out the box.
Benefits
Usage
There are two primary ways that this function will be used:
parseMetaobject
helper to get the properly formatted fields.Example Dev Experience
Graph QL Query
The original graphql query for a specific metaobject. This example includes a nested metaobject reference to show how that might be parsed. It'll be common to have nested metaobjects 2-3 levels deep.
Query Result
The unformatted output from the graphql api.
Trigger Function
The user would trigger the utility by passing the metaobject to the function.
Output Option 1
Formatted output transforming fields into parsedFields. The fields within parsedFields will have the exact output of the parseMetafield utility.
Output Option 2
Transform the output to directly attach parsed values to the field keys. This streamlines and makes the data easier to access but does create a discrepency in the data structures between fields within metaobjects and normal fields that were parsed directly with the parseMetafield utility.
Implementation
To implement this we need to do a few things. This draft pr attempts to get the bones in place for these changes. Feedback on approach is more than welcome!
Open Questions
metaobject.parsedFields.hero.parsedValue.parsedFields.title.parsedValue
becomesmetaobject.parsedFields.hero.parsedFields.title
.parseMetaobject(metaobject: value, streamlined: true)
?