Verbb

​
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#

GraphQL
JSON Response
{
    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.
linkUriStringThe link URI, if an element-based link.
customAttributesArrayTypeThe custom attributes for the link.

​
Custom Fields#

In order to access custom fields on a Link Type, you'll need to use the correct type. This will be a PascalCase string of the Link Type defined in your field settings. This is because each Link Type has a different field layout, with different fields. You'll need to "cast" the correct Link Type depending on what field you need to query.

myLinkField {
    url
    text

    ... on myLinkField_Url_LinkType {
        plainText
    }

    ... on myLinkField_CustomUrl_LinkType {
        anotherField
    }
}

For example, for any of the default Link Types (Asset, Entry, Custom, Url, etc.) you can use myLinkField_Url_LinkType and then any custom field handles within that. For any additional, new Link Types that you create over the default ones, use PascalCase for the "Label". For example, for a Link Type with a label "Custom URL", this would be myLinkField_CustomUrl_LinkType.

Previous ← Events Next Migrating from Typed Link →