`useAppMetafields` returns duplicates on order status page

Extensions
1

Describe the bug

On the order status page of checkout, the useAppMetafields hook returns a list of 12 results when it should only return 1 result.

Reproduction

My code looks like:

const appMetafields = useAppMetafields({
  type: 'product',
  namespace: 'my_namespace',
  key: 'my_key',
})

When there is 1 product in the cart, the hook returns 12 results with the same target ID.

Hook result 
[
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
    {
        "target": {
            "id": "9003345051933",
            "type": "product"
        },
        "metafield": {
            "key": "my_key",
            "namespace": "my_namespace",
            "value": "https://my_value.com",
            "type": "url",
            "valueType": "string"
        }
    },
]

On the thank-you page, the hook correctly returns a list of 1 result.

Version @shopify/ui-extensions-react: 2024.4.2

2

Hey!

I’ve connected with the relevant team internally to see what their recommendation is.

1 Like
3

Hey @masonmcelvain, thanks for reporting the issue!

Does this issue only occur when using the CLI preview (ie. using shopify app dev)? Or does it also occur in deployed extensions (please clear your local storage when testing this)?

4

@avocadomayo this issue occurs both during the CLI preview and deployed extensions. I tested with an incognito window. Multiple developers/users on our team were able to reproduce the problem. Let me know if you need any more information, thanks for looking into it!