GraphQL and product metafields: how to access array of products

Technical Q&A
1

Hello there,

I’m a beginner in regards to GraphQL. My challenge: I use the Shopify Storefront API to create a selectbox of all our products. When a user selects a product in this selectbox, some of its data (eg: metafields) should be displayed on the page.

The metafields i’m accessing actually contain a list of products (see it like related products) (this metafield type is “product list”, which is essentially an easy product picker). The output of the metafield when accessing it through graphQL is

["gid://shopify/Product/4650889281611","gid://shopify/Product/6620350382155","gid://shopify/Product/6717558653003","gid://shopify/Product/6535633141835"]

It seems as this is pasted as a string. How would i get titles, descriptions, images, … from these products?

2

Hey Bud, have you figured this out? Having the same issue.

3

The best way I’ve found is to convert the string to an array of guids, and then query an array of products.

So for example, once you have the return value from the metafield, you can convert it like this:

const convertToEmbedArray = (sampleArr: string): string[] => {
    return sampleArr?.replace(/\[|\]/g, '').replace(/"/g, '').split(',') ?? [];
};

Which will give you the array of guids, and then you can run another query:

{
    query getProductsByIdArray($ids: [ID!]!) {
        nodes(ids: $ids) {
            title,
            description
            ...
        }
    }
}

I’m sure there’s a cleaner way to do it but this is what I’ve done to get around this issue. You can get whatever info you need from that second query once u have the ids.

Hope this helps