GraphQL#

Hyper supports accessing Link objects via GraphQL. Be sure to read about Craft's GraphQL support (opens new window).

In order to query a link, you'll need to first query the element that the Hyper field is attached to.

Example#

{
    entries (section: "news", limit: 1) {
        myLinkField {
            url
            text
        }
    }
}
{
    "data": {
        "entries": {
            "myLinkField": [
                {
                    "url": "http://my-site.test/some-url",
                    "text": "Some Text"
                }
            ]
        }
    }
}

Note that for consistency with the GraphQL spec, the value for a Hyper field will always be an array of LinkInterface's, regardless of whether your Hyper field is set to be a multi-link field or not.

The LinkInterface interface#

This is the interface implemented by all links.

FieldTypeDescription
ariaLabelStringThe aria-label attribute for the link.
classesStringThe class attribute for the link.
elementElementThe element (if provided) for the link.
isElementBooleanWhether the chosen link value is an element.
isEmptyBooleanWhether a link has been set for the field.
linkStringThe HTML output for a <a> element.
linkTextStringThe text for the link.
linkUrlStringThe url for the link.
newWindowBooleanWhether the link should open in a new window.
targetStringThe target attribute for the link.
textStringThe text for the link.
titleStringThe title attribute for the link.
typeStringThe link type.
urlStringThe url for the link.
urlPrefixStringThe url prefix for the link.
urlSuffixStringThe url suffix for the link.

Previous ← Events Next Migrating from Typed Link →

Get started with Hyper

Available for Craft 4. Get it from the plugin store.