Get metafields for category using front matter



---
    category:
    gql: "query categoryById($categoryId: Int!) {
        site {
            category(entityId: $categoryId) {
                metafields(namespace: 'my-namespace', keys: ['my-key']) {
                    edges {
                        node {
                            value
                        }
                    }
                }
            }
        }
    }"
---

Output metafields using handlebar:



{{#each gql.data.site.category.metafields.edges}}
    {{#if node.key "===" "my-key"}}
        {{{node.value}}} 
    {{/if}}
{{/each}}

Get metafields for category via javascript




    </script>
    // nest within any conditional, such as onload
    fetch('/graphql', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer {{settings.storefront_api.token}}'
    },
    body: JSON.stringify({ query: "{ 
            site { 
                category(entityId: $categoryId) {
                    metafields(namespace: 'my-namespace', keys: ['my-key']) {
                        edges {
                            node {
                                value
                            }
                        }
                    }
                }
            }
        }"
    }) //graphql query string
    })
    .then(data => data.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
    </script>
    

NOTE:

  • The settings.storefront_api.token comes from the Handlebars context
  • If trying to use this from within any Theme JS files, you'll need to make some adjustments and make sure the JS context is provided to the file appropriately