How to get the app metafield in checkout ui extensions component? ( useAppMetafields )

jana43
Shopify Partner
4 0 2

I was trying to retrieve the metafield value of the current app using the namespace and key in the checkout UI extension component using useAppMetafields().

 

I ran a graphiql query to create an app metafield

 

import shopify from "../../shopify.js";
import { getOwnerID } from "../shop/getOwnerID.js";

export async function createBill(req, res){
    try {
        const client = new shopify.api.clients.Graphql({
            session: res.locals.shopify.session,
        });
        let ownerIdApp = await getOwnerID(client);
    

        let billObject = {'status':"active"}

        const metaFieldSetQuery = await client.query({
            data: {
                "query":`mutation CreateAppDataMetafield($metafieldsSetInput: [MetafieldsSetInput!]!) {
                    metafieldsSet(metafields: $metafieldsSetInput) {
                      metafields {
                        id
                        namespace
                        key
                      }
                      userErrors {
                        field
                        message
                      }
                    }
                  }
                  `,
                  "variables":{
                    "metafieldsSetInput": [
                        {
                          "namespace": "checkout_pro",
                          "key": "billing",
                          "type": "json",
                          "value": JSON.stringify(billObject),
                          "ownerId": ownerIdApp
                        }
                      ]
                  }
            }
        
        })

        res.status(200).json(metaFieldSetQuery)
    } catch (error) {
        console.log("ERROR :-", error);
        res.status(500).json(error)
    }
}

 

This code created the metafield, I want to retrieve the metafield in the checkout UI extension, so I have added the namespace and key in shopify.extension.toml like this 

 

[[extensions.metafields]]
    namespace = "checkout_pro"
    key = "billing"

 

 In the checkout.jsx file I tried to retrieve the metafield so I did something like this 

 

 const appMetafields = useAppMetafields({namespace:"checkout_pro", key:"billing"})
 console.log("APP METAFIELDS ............. ", appMetafields);

 

Unfortunately, the appMetafields is an empty array. Please help me.

Replies 8 (8)

HungryCoder
Shopify Partner
1 0 0

Yes, I am also facing this issue.....

leonpl
Shopify Partner
9 0 0

you need to setup a hook to wait for the metafield data as it may take sometime to load in. Or, use await new promise(settimeout()..) but not the right way 😉

 

 

jana43
Shopify Partner
4 0 2

That was not the issue, useAppMetafields is itself a hook. I successfully got the shop metafield, but I was trying to get the installed app metafield. Shop metafield can be easily manipulated by Metafield Guru app, but the app metafield can only be manipulated by the installed app. I have saved some information about app subscription in app metafield which I want to use in the checkout UI extension for the conditional rendering of the extension. 

leonpl
Shopify Partner
9 0 0

Yes you are right. useAppmeta is a hook. I was refering to your code and you need a hook to the data point. app metafield cannot be read in on checkoutUI as what I understand.  If u use shop meta, it can be easily mutated by iQL by anyone, if i m not wrong.. Your best bet is to use app meta, but you need to setup a custom hook to proxy fetch from your app server. 

jana43
Shopify Partner
4 0 2

Yes, you understand it correctly, our goal is to show the extension depending on app subscription plan. Our team manager doesn't want to call the backend to check the subscription status to reduce the server cost. That's why, we are trying.

leonpl
Shopify Partner
9 0 0

sorry was away cant reply earlier..

you can use reserve namespace and define it private and storefront access. 

DavidT
Shopify Partner
24 1 6

useAppMetafields is a hook that allows you to get the metafields that are defined in your shopify.extension.toml file. It's a poor choice of name, because it doesn't actually refer to app-owned metafields. You use this to get metafields of a shop, customer, etc. useMetafields is used to get the metafields on the current checkout/order. I'm still not sure if it's possible to check app-owned metafields from the checkout extensions yet or not.

QuickEdit - Bulk Product Edit - Quick and easy bulk editor for products and variants.
SafeShip - Address Validator - International address validation and PO box blocking at checkout for Shopify Plus merchants.
leonpl
Shopify Partner
9 0 0

yes it's a bit confusing. app-owned is not appMetafields in checkout ui. as i said before, if u need to access app-owned meta, u will need to proxy fetch from your app server. but if u prefer not to use fetch, you can use reserve namespace meta and define the meta as private for storefront query in checkout ui. it works almost the same as app-owned as it can only be access by your app.