How to access App-data metafields from checkout ui extension.

Technical Q&A
1

Hey,

I keep app’s data in App-data metafields but apparently it is not possible to access them in Checkout UI extension. Could you guys confirm that it is not possible, or i’m doing something wrong.

This is how I write to metafields: https://shopify.dev/docs/apps/custom-data/metafields/app-data,)

This is how I read them within the app and it works fine: https://shopify.dev/docs/api/admin-graphql/2023-01/queries/appInstallation#examples-Get_metafields_attached_to_an_app_installation

This is how I try to get access to them in checkout ui ext:

[[metafields]]
namespace = "mynamespace"
key = "mykey1"

[[metafields]]
namespace = "mynamespace"
key = "mykey2"

Then I try to read them within extension:

// first way 
const {appMetafields} = useExtensionApi();

// another way
const metafields = useAppMetafields();

Both ways didn’t work for me.

2

I’m looking to see if this is possible. Did you get this working?

3

So it appears that the unfortunately named AppMetafields is actually not referring to app metafields, but metafields on the relevant Shop, Customer, Product, or Variant.

4

Unfortunately yes. I ended up using Shop metafields as it seems not possible to get access to the app metafields from an extension.
@DavidT

5

I’m wondering if it’s possible to use the Storefront API to fetch the metafields on the Shop but using reserved prefixes to protect the metafields from being changed by other apps.

6

@DavidT Never tried. So you need to have access to the same global metafields from your app, checkout ui extension and Storefront API? Let me know if you find a solution for it.

7

Could you advise how you did this?
I’m having trouble getting anything but undefined when using the useAppMetafields react hook. I’m unsure of how to format the filters.
Thanks so much!

Rhianna

8

Scratch that, figured it out haha :+1:

9

I think the configuration in the toml file should be [[extensions.metafields]] or [[extensions.targeting-metafields]], but I have not yet found a way to make it work.
Did you succeed in getting it to work?

10

At the point when I was working on that, there were another API version:

https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/configuration

If you manage to make it work with the new API version, let us know :slightly_smiling_face:

11

How did you solve this issue. I keep getting empty array when i use useAppMetafileds()

12

@RhiRo How did you resolve this issue. Can you please paste sample code. Thanks.

13

In the shopify.extension.toml:

[[extensions.metafields]]
namespace = “some_namespace”
key = “some_key”

In the Checkout.jsx you import useAppMetafields.
The code could e.g. be:

…

const appMetafields = useAppMetafields()

…
console.log(‘appMetafields’,appMetafields)

const myMetafield = appMetafields.filter(appMetafield => appMetafield.metafield.namespace ==‘some_namespace’ && appMetafield.metafield.key ==‘some_key’)

14

Yeah I understand that part. But how do you add the data to the metafields from an embedded app, for example if you want the merchant to make configurations that will be used in the checkout ui extension?

15

I am not sure I understand your question, but in general you can add UI to the embedded app that allows the merchant to configure different parameters. You can set those settings in metafields with the graphql mutation metafieldsset c.f. https://shopify.dev/docs/api/admin-graphql/2024-01/mutations/metafieldsset.

16

This is what I’m currently doing in my embedded app; app._index.jsx:

const createMetafieldDefinitionMutation = await admin.graphql(
        `#graphql
          mutation CreateMetafieldDefinition($definition: MetafieldDefinitionInput!) {
            metafieldDefinitionCreate(definition: $definition) {
              createdDefinition {
                id
                name
                namespace
                key
              }
              userErrors {
                field
                message
                code
              }
            }
          }
        `,
        {
          variables: {
            "definition": {
                "name": "Ingredients",
                "namespace": "$app:test_secret_keys",
                "key": "ingredients",
                "description": "A list of ingredients used to make the product.",
                "type": "single_line_text_field",
                "ownerType": "SHOP"
              }
            
          }
        }
      );

And in shopify.extension.toml:

[[extensions.metafields]]
namespace = "test_secret_keys"
key = "ingredients"

And in Checkout.jsx:

const metafields = useAppMetafields()
console.log(metafields) // Returns an empty array []

I got the idea to use “SHOP” as the ownerType because of this post: https://github.com/Shopify/ui-extensions/discussions/1031

17

No you are using “metafieldDefinitionCreate” - this just creates a metafield definition for you to see in the admin under Settings → Custom data, but it does not set a value in the metafield. If you want to set a value in the metafield, you should use the graphql mutation metafieldsset c.f. https://shopify.dev/docs/api/admin-graphql/2024-01/mutations/metafieldsset.

18

This is what I’ve now in the embedded app side but I’m still getting an empty array on the checkout ui extension.

const currentAppInstallationQuery = await admin.graphql(
        `#graphql
          query {
            currentAppInstallation {
              id
            }
          }
        `
      );

      const currentAppInstallationQueryResponseJson = await currentAppInstallationQuery.json();
      const currentAppInstallationId = currentAppInstallationQueryResponseJson.data?.currentAppInstallation?.id
      
      const createAppDataMetafieldMutation = await admin.graphql(
        `#graphql
          mutation CreateAppDataMetafield($metafieldsSetInput: [MetafieldsSetInput!]!) {
            metafieldsSet(metafields: $metafieldsSetInput) {
              metafields {
                id
                namespace
                key
              }
              useErrors {
                field
                message
              }
            }
          }
        `,
        {
          variables: {
            "metafieldsSetInput": [
              {
                "namespace": "test_secret_keys",
                "key": "test_api_key",
                "type": "single_line_text_field",
                "value": "aS1hbS1hLXNlY3JldC1hcGkta2V5Cg==",
                "ownerId": currentAppInstallationId
              }
            ]
          }
        }
      );

And accessing it in shopify.extension.toml

[[extensions.metafields]]
namespace = "test_secret_keys"
key = "test_api_key"
19

Ensure that data is actually set - I don’t know whether you check the response from metafieldsSet to determine whether an error occurred.
But you can go into the admin → Settings → Custom data → Shop and manually set a value in you metafield and then test whether you can access the value in the UI extension

20

Hi Turbofan,

Sorry I’m a bit out of practice with checkout extensions, as I haven’t looked at them for about 6 months.
If I’m understanding the issue you’re having (which I’m not sure I am haha), I think it might be helpful to look at Nicks answer to this post I made when I was having issues.