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

Retired Boards Appdev Extensions
1

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.

2

Yes, I am also facing this issue…

3

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 :wink:

4

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.

5

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.

6

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.

7

sorry was away cant reply earlier..

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

8

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.

9

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.