Unable to fetch Link with server url in GraphQL

Question

I am working with Sitecore 10.3 locally, utilizing Next.js for the frontend in headless mode. I am successfully able to edit components within the Experience Editor. However, I've an issue where links are not displaying correctly on the website.

Instead of showing the actual links, only the link paths are visible.

GraphQL Code

query ContentCardQuery($datasource: String!) {
  datasource: item(path: $datasource, language: "en") {
    id
    name
    ... on About {
      title {
        value
      }
      link {
        url
      }
    }
  }
}

Answer 1

Here’s you can change GraphQL query that includes server URLs for this you need to use alwaysIncludeServerUrl :true.

The url field with alwaysIncludeServerUrl: true is interesting. In Sitecore, this typically means the returned URL will include the full server URL, not just the relative path. This is useful when you need absolute URLs, for example, in email communications or when sharing links externally.

query ContentCardQuery($datasource: String!) {
  datasource: item(path: $datasource, language: "en") {
    id
    name
    ... on About {
      title {
        value
      }
      url(options: { alwaysIncludeServerUrl: true })
    }
  }
}

Here I'm using home template in attached screenshot and getting the title and url field value. As shown in output I'm getting url value with server url.

Hope this helps!!! Let me know in case you have doubts.

Answer 2

In order to render the server url on link field in GraphQL, return the jsonValue from GraphQL as below.

query ContentCardQuery($datasource: String!) {
  datasource: item(path: $datasource, language: "en") {
    id
    name
    ... on About {
      title {
        value
      }
      link {
        jsonValue
      }
    }
  }
}

This will contains the server link as well as enlisted below.

Note: Make sure you set the alwaysIncludeServerUrl setting as true for the link provider specified on the website.

Hope this helps!!! Let me know in case you have any doubts.