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.
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.
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.
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.
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: https://graphql.umbraco.io. 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:
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:
