i can't get the Metafield data using useAppMetafields in Checkout UI extensions

[kojiro2hb]

i wrote following code

but console show " metafields, [] "

means no array...

how to get metafields using useAppMetafields ?

[[extensions.targeting]]
module = "./src/BlockRender.jsx"
target = "purchase.checkout.block.render"
#export = "BlockRender"

    [[extensions.targeting.metafields]]
    key = "multipass_identifier"
    namespace = "ids"

    [[extensions.targeting.metafields]]
    key = "price"
    namespace = "tshirt"

import React, { useEffect } from 'react';


import {
Banner,
reactExtension,
useAppMetafields
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <BlockRender />,
);

function BlockRender() {




const test = useAppMetafields();


useEffect(() => {


console.log('metafields', test);


}, []);


return (
<Banner>
   This is Block Render
</Banner>
);
}

[Liam]

Hi Kojiro2hb,

Your code seems to be using the useAppMetafields hook correctly. But the hook will return an empty array if the metafields are not set correctly or if there's an issue with the configuration.

You should ensure that the metafields are properly set up in the shop and that the keys and namespaces match exactly with what's in the shop. Are there any error messages or warnings appearing in the console?

[Liam]

Also - what is the metafield type (eg: customer, product, etc)?

[kojiro2hb]

thank you for your reply

one for customer and one for variant

    [[extensions.targeting.metafields]] (customer)
    key = "multipass_identifier"
    namespace = "ids"

    [[extensions.targeting.metafields]] (variant)
    key = "price"
    namespace = "tshirt"

[Liam]

For the customer based metafield your app will need to have access to protected customer data: 

Another thing that might be happening is that the effect is running before the Metafields data has been initialized. Since the effect doesn't have any dependencies it's only running once. It would be worth adding a dependency to the useEffect on the value returned from the useAppMetafield hook.

[kojiro2hb]

@Liam 

i set like this, is it possible to give me some example code ?

 

[kojiro2hb]

@Liam 

sorry 😢 i still can't get metafields...

could you help me how to get ?

i want some sample code

[kojiro2hb]

if i query the metafield by graphql, it returns correctly

{
  "data": {
    "customer": {
      "email": "***@gmail.com",
      "phone": null,
      "metafields": {
        "edges": [
          {
            "node": {
              "id": "gid://shopify/Metafield/***",
              "namespace": "ids",
              "key": "multipass_identifier",
              "value": "7200025088981"
            }
          }
        ]
      }
    }
  }

[WildData]

I'm having the exact same issue trying to access a customer metafield. I reinstalled the app in case it was a scope issue but the array is still empty while the metafield is setup correctly

[WildData]

well... it was a scope issue in my case. I had to update the 

access_scopes from shopify.app.toml

[bootsgridDev]

What did you update?. Can you please explain it in detail?