Cannot get Metafields in Shopify Validation UI Extension and applymetafieldchange function

Shopify Apps
1

As the title suggests, i have spent a considerable amount of time and i have no clue how to fix this problem. I am trying to follow the guide set here: Shopify Checkout Validation UI Extension . My problem arises in the fact that when i get to the part where i need to pull in my validation metafields, it ALWAYS is null.

Specifically this part of the code:

export default reactExtension(
  TARGET,
  async (api) => {
    const configuration = JSON.parse(
      api.data.validation?.metafields?.[0]?.value ?? "{}"
    );

    const products = await getProducts();

    return (
      

I am also noticing in the **cart-checkout-validation** extension when i try to see the metafields there, it also comes back as null when looking in the **run.js** file

I don't know if this is an issue with my graphql query? this is it below (keep in mind i renamed the namespace/key for my own configuration):

```javascript
query RunInput {
  cart {
    lines {
      quantity
      merchandise {
        __typename
        ... on ProductVariant {
          id
          product {
            title
          }
        }
      }
    }
  }
  validation {
    id
    metafield(namespace: "$app:monthly-order-limit-namespace", key: "productTags") {
      value
    }
  }
}

Here is what my toml file looks like as well:

api_version = "2024-07"

[[extensions]]
name = "t:name"
handle = "cart-checkout-validation"
type = "function"

description = "t:description"

  [extensions.ui]
  handle = "validation-settings"

  [[extensions.metafields]]
  namespace = "$app:monthly-order-limit-namespace"
  key = "productTags"

  [[extensions.targeting]]
  target = "purchase.validation.run"
  input_query = "src/run.graphql"
  export = "run"

  [extensions.build]
  command = ""
  path = "dist/function.wasm"

I know that in the tutorial it is mandatory to create the metafield definition and reinstall the app for it to take place i have done that many times and have checked the JSON response and it seems to have created the metafield. I also doublechecked by looking into the graphql query and IT’S THERE.

here is my validationsettings.jsx file:

import { useState } from "react";

import {
  reactExtension,
  useApi,
  Section,
  NumberField,
  Box,
  InlineStack,
  Text,
  BlockStack,
  Heading,
  Button,
  Banner,
  Image,
  FunctionSettings,
} from "@shopify/ui-extensions-react/admin";
import { Paragraph } from "@shopify/ui-extensions/admin";

const TARGET = "admin.settings.validation.render";

export default reactExtension(
  TARGET,
  async (api) => {
    const configuration = JSON.parse(
      api.data.validation?.metafields?.[0]?.value ?? "{}"
    );
    console.log(api)

    console.log(api.data)

    console.log(api.data)
    console.log(configuration)

    return (
      

No matter what I cannot get this to work and get the metafield to show up.

Even when i run applyMetafieldChange it STILL does not do anything even tho i get a "success" message. i notice nothing is firing in my network tab.

If someone can please help me out because im at my wits end with this and don't know where to go from here.

Thanks in advance