Umbraco Heartcore and headless cms integrations graphics

Introducing GraphQL for Heartcore

Fetch the exact data you need

Morten Christensen
Written by Morten Christensen

From today, Heartcore ships with native support for GraphQL. A feature that’ll support front-enders as well as back-enders when querying specific content fields from Umbraco, making it both faster and less error-prone to build apps, websites etc. A feature that takes Heartcore to the next level.

As with all Umbraco products, we strive to make things simpler for you. Making GraphQL a native feature in Heartcore is a prime example of this.

Umbraco Heartcore is our headless CMS offering that already includes features like Content Delivery Network through Cloudflare, Forms and Webhooks. A headless CMS that lets you manage your content in an easy and straightforward way for any frontend (apps, websites, screens etc.) in the programming language you prefer. 

Umbraco Heartcore animation gif

And as a SaaS offering, we take care of the standard maintenance of the software so that you can spend your time on creating great solutions.

Today, we’re taking Heartcore to the next level by introducing GraphQL. 

What is GraphQL?

GraphQL is an open-source data query and manipulation language originally built and released by Facebook. It gives the client application the power to define and structure the data needed which greatly reduces the number of API calls as well as makes sure that the returned data is structured and only contains the information requested. Basically, with GraphQL, you make sure your platform retrieves exactly what is needed from Umbraco, nothing more, nothing less. 

Screenshot: GraphQL PLayground in Umbraco Heartcore, headless CMS

Retrieving two text fields and a cropped image from the Home content item

Compared to using custom-built REST APIs, GraphQL helps you in not over-fetching data - and then you don’t have to spend time on building APIs for all the different combinations of the content you need to retrieve. 

By fetching just the right data sets, your application/website becomes faster for your visitors and they won’t have to pay for excessive data use when visiting your app or website. This makes GraphQL not just a beneficial feature for developers, but also for your visitors and your business in general. 

Screenshot: GraphQL PLayground in Umbraco Heartcore, headless CMS

Combining two queries in order to retrieve the main navigation and the footer

Play safe in the GraphQL Playground

Wave goodbye to unfortunate typos or data requests that don’t even exist.

Slip-ups that might end up breaking vital functions of your platform, leaving your visitors with a not-so-great impression. 

When using the GraphQL Playground in the Backoffice to tailor your queries it simply won’t allow these types of slip-ups. If there’s a typo it won’t allow you to request it. 

GraphQL error message

Typo in query is highlighted because the field is not available on the document type

This means that you can be sure that what you’ve built is working - and if there is an error, you’ll find it before launch and fix it. This makes troubleshooting super fast and thanks to the structure of the query language, less prone to human-errors, freeing up time for you to build other cool features for your client. 

And by the end of the day, makes it faster to launch the project - with great confidence.

How does GraphQL work in Heartcore?

Let’s dive into the more technical aspects of GraphQL:

How do you work with GraphQL?

Whenever you create or update document types from the Backoffice, the GraphQL schema is updated behind the scenes and whenever the content is published, that content will be available through the GraphQL endpoint for Umbraco Heartcore: When calling this endpoint you simply add the alias of the current environment as a header to the request and you are good to go.

How do you “play” in the GraphQL Playground?

With a GraphQL Playground directly available in the Backoffice of Heartcore, you can start writing queries as soon as your content is published. Everything is configured to the project you are working on, so you don’t have to worry about setting anything up. Just start writing your queries and let the schema from your document types guide you.

The GraphQL API is made available through Cloudflare, which ensures a low latency when calling the endpoint from anywhere in the world.

Press play on the video and get a preview:

Play video

How to get started with GraphQL

Making requests using project headers and API Keys

If you want to learn more about how to use the GraphQL API with Heartcore in the client library of your choice, we have written a short introduction for how to use authentication with API Keys and the headers that must be part of the request.

How the GraphQL schema is generated 

Find the documentation for the GraphQL schema here.

GraphQL types for each of the built-in Property Editors 

Another handy overview is this where you can find the GraphQL type for each of the built-in Property Editors.

GraphQL Clients

Whether you are using Heartcore for an app or a website project you can use GraphQL and utilize one of the many client libraries available. Our implementation is compatible with the Apollo Clients and you can find even more clients for your programming language of choice.

In-depth look at how to use GraphQL in Umbraco Heartcore

For a more in-depth look at how to use GraphQL in Umbraco Heartcore, we recommend that you take a look at this article showing the usage from creating document types to writing your first query.

Try GraphQL in Heartcore today

GraphQL is available in the Starter, Professional and Enterprise plans. 

If you already have a Heartcore project running on one of these plans, the feature is there for you to enjoy from today! 

Can I try GraphQL in a free trial? 

Yes! Our free 14-days Heartcore trial is based on the Starter plan which means that it now includes the GraphQL feature:

Try GraphQL in the free Heartcore trial

Loved by developers, used by thousands around the world!

One of the biggest benefits of using Umbraco is that we have the friendliest Open Source community on this planet. A community that's incredibly pro-active, extremely talented and helpful.

If you get an idea for something you would like to build in Umbraco, chances are that someone has already built it. And if you have a question, are looking for documentation or need friendly advice, go ahead and ask the Umbraco community on Our.

Want to be updated on everything Umbraco?

Sign up for the Umbraco newsletter and get the latest news and special offers sent directly to your inbox