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

kojiro2hb
Shopify Partner
10 1 0

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>
);
}

 

Replies 9 (9)

Liam
Shopify Staff
2731 299 769
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 | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Liam
Shopify Staff
2731 299 769

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

kojiro2hb
Shopify Partner
10 1 0

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
Shopify Staff
2731 299 769

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.

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

kojiro2hb
Shopify Partner
10 1 0

@Liam 

 

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

 

スクリーンショット 2024-02-27 22.07.03.png

kojiro2hb
Shopify Partner
10 1 0

@Liam 

 

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

 

could you help me how to get ?

 

i want some sample code

kojiro2hb
Shopify Partner
10 1 0

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
Shopify Partner
20 1 4

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
Shopify Partner
20 1 4

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

access_scopes from shopify.app.toml