Category: cms

Integrate Hygraph with Svelte, React, Vue

Hygraph headless CMS integration samples


Graph CMS or Hygraph CMS is a headless CMS for building backend for web and mobile apps. It is easy to use.

The Graphql which is modern way to fetch selected part of a database, enable developers to easily access the data in Hygraph.

Integrate Hygraph with Svelte

The first step is to enable public API from the Hygraph settings and then we can use libraries like urql, apollo, graphql-request for querying data.

In the Svelte Kit route we can place a load module on the top of the component for fetching data as follows .

//route/index.svelte

<script context="module">
    import {GraphQLClient} from "graphql-request";
    export async function load({params}) {
        const {slug} = params;
        const graphcms = new GraphQLClient(
            'https://api-ap-south-1.hygraph.com/v2/cl5uo7orr3kf801t8d4ld7hoe/master',
            {
                headers: {},
            }
        )
        const data = await graphcms.request(
            `query  {
        blogpost(where: {slug: "${slug}"})
        {
            title
            catgory
            content{
            html
            }
            publishedAt
            summary
            image {
            fileName
            url
        }
        }
    }`
        );
 return{
     props: {
         post: data.blogpost,
     },
 }
    }

</script>

<script>
    export let post;

</script>

Similarly we can apply the logic on Angular Service, Vuejs, React, and Solidjs.

I have two projects on Github for you 🎦

Hygraph : Graphql headless CMS

A Graphql only headless CMS for easy content management


Graph CMS or Hygraph CMS is a headless CMS for building backend for web and mobile apps. It is easy to use.

The Graphql which is modern way to fetch selected part of a database, enable developers to easily access the data in Hygraph.

Hygraph free account offer

  • 3 seats
  • 1 environment
  • 2 content stages
  • 2 roles
  • 2 locales
  • 1,000 content entries
  • 25 content models
  • 100 GB asset traffic (Hard limit)
  • 1M API calls (Hard limit)
  • No version retention
  • No audit logs retention

Schema and the content

Using schema we can create as many content type and create posts. A schema can be a product type consisting of fields required to store products information.

Behind the the scene Hygraph will handle the database for us. 😎

More Hygraph CMS guides on the way