Svelte > Integrate DatoCMS with Svelte

    Integrate DatoCMS with Svelte

    Building an application using Svelte and GraphQL is a quick way to go live with a CMS-backed website.

    With the globally-distributed CDN serving the Content Delivery API of DatoCMS, you can serve content directly to your end users without an intermediate server. You maintain and host a static front-end application; we deal with the rest!

    Fetching content from our GraphQL API

    There are multiple options to fetch GraphQL content from DatoCMS with Svelte.

    • If you want to start simple, follow Svelte's suggestion and leverage the standard web API: fetch API is the conventional way of retrieving server-side data, and it's well supported by browsers;

    • If you need something ready-made, head down to Houdini, a complete GraphQL solution for Svelte applications.

    We also have a Houdini-based example project in our marketplace.

    Quick start using fetch

    Use the standard fetch function to retrieve data from the DatoCMS GraphQL Content Delivery API in a Svelte component.

    import { onMount } from 'svelte';
    const query = gql`
    query {
    blogPost {
    let data = null;
    onMount(async () => {
    const response = await fetch('', {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    Authorization: "Bearer YOUR_API_TOKEN",
    body: JSON.stringify({ query })
    const json = await response.json()
    data =;
    {#if data}
    <h1>{{ data.blogPost.title }}</h1>

    Make sure you replace YOUR_API_TOKEN with an actual API token of your DatoCMS project. You can create a new one under "Settings > API Tokens".

    You can learn everything you need regarding how to build GraphQL queries on our Content Delivery API documentation.

    We use cookies to enhance the user experience. Do you consent their use in accordance with our cookie policy?