How to read a regular customer metafield value from checkout ui extension

[DeeDee-TDY]

I have tried the following code to read a customer metafield value. The check for a defined or undefined metafield is successful, but I don't know how to read the metafield value (metafield?.value is undefined)

const metafield = useAppMetafields({type: "customer", namespace: "details", key: "pook",});

if (typeof metafield === 'undefined') {
console.error('DEBUG: metafield from useAppMetafields is undefined.');
}
else{
console.error('DEBUG: metafield value: ' + metafield?.value);    //metafield?.value is undefined
}

[LouiseEH]

Did you configure which metafields the app has access to in the extension toml, and restartede afterwards e.g.:

[[extensions.targeting.metafields]]
namespace = "details"
key = "pook"

I expect the result of "metafield" to be an array of metafields, but currently I have not found a way to make it work either. 

[DeeDee-TDY]

Thank you for your suggestion. Yes, I configured the metafield in the toml file, and also added useAppMetafields hook to the import section of the source code. I believe I am just not referencing the value properly.

[DeeDee-TDY]

I do see the response is an array, but I can't get any of these to work either:

    metafield[0].value

or  

    metafield.forEach(element => {

      console.error('DEBUG element.value: ' + element.value);

    });

.forEach(element => {

      console.error('DEBUG element.index: ' + element.index);

    });

[LouiseEH]

I got mine working now, e.g.:

1. Configure a defined product metafield via the admin, e.g. namespace = 'custom', key = 'test'
2. Set a value in the metafield on a product
3. Configure the metafield in the toml file

[[extensions.metafields]]
namespace = "custom"
key = "test"​

I placed it right after the [[extensions]] variables, probably not important though

• Restart the server
• Ensure the product in the cart has a value in the metafield
• Use the hook in the jsx file:

const appMetafields = useAppMetafields()
console.log('appMetafields', appMetafields)​

• I though it would be necessary to enable storefront read access on the defined metafield, but I can access the metafield value in the browser console log when the setting is disabled.
  
  
  
• See the browser console log - the appMetafields is a list of metafield values, so you should be able to access the value via 

appMetafields[0].metafield.value​

[DeeDee-TDY · Accepted solution]

In my case, I had multiple extension targets and multiple metafields defined in the toml file. I reviewed new guidance at https://shopify.dev/docs/apps/app-extensions/configuration .
What fixed the problem for my app was modification to the toml file to:

a) use [[extensions.targeting.metafields]] instead of [[extensions.metafields]] and

b) place each metafield block under the associated target block.

Example: 

[[extensions.targeting]]
module = "./src/Checkout1.jsx"
target = "purchase.checkout.shipping-option-list.render-before"

[[extensions.targeting.metafields]]
key = "key1"
namespace = "custom"

[[extensions.targeting]]
module = "./src/Checkout2.jsx"
target = "purchase.checkout.shipping-option-list.render-after"

[[extensions.targeting.metafields]]
key = "key2"
namespace = "custom"